构建一个根据打字速度定义字体的打字机生成器

Question

已解决：https://codepen.io/danborjesson/pen/qGjMzw

已编辑：

我正在构建一个文本生成器，它会根据您键入的速度更改字体粗细。这 Codepen 展示了我目前所拥有的。

它包含一个每次按下一个键都会启动一个计时器的功能，以及一种在同一操作中更改字体粗细的方法。然而，彼此并不依赖。

是否可以从中获取值 javascript:

    var last;
var output = $('#output');
$('#text').on('input', function() {
    var n = new Date()
    output.text((last - n) + ' ms');
    last = n;
});

为了简化，而不是900。

function myFunction(event) {
  document.getElementById("text").style.fontWeight = "900";
}

我找不到方法！感谢所有帮助！

/R

Answer 1

你把它弄得太复杂了。不要将内联 js 与文件中的 js 混合使用。只需为您的 text 字段添加第二个侦听器并使用您需要的值。此外，keyup 似乎是您需要的事件，而不是 keypress。您应该检查的另一件事是 ms 的计算，您可能想要获得一个正值，即 n - last.

let last, ms, n;
let output = $('#output');

$('#text').on('input', function() {
    n = new Date();
    ms = n - last;
    output.text(ms + ' ms');
    last = n;
});

$('#text').on('keyup', function() {
    console.log(ms);
    this.style.fontWeight = "900";
});

let i = 0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i += 1 );
  });
});

@import url(https://use.typekit.net/obu1vfn.css:);

html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;  
}

list {
    font-family: orator-std, monospace;
    font-weight: 400;
    font-size: 14px;
    margin-top: 2em;
    padding: 2rem;
}

button, input {
    border: none;
    font-weight: 100;
    width: 800px;
    height: 200px;
     font-family: ibm-plex-sans, sans-serif;
    font-size: 5rem;
    color: #11111;
    
    /**transition: font-weight .5s ease-in-out;
    &:hover,
    &.be-bold {
        font-weight: (900);
        cursor: pointer;
   
    }**/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<list>
//HOVER_THE_BOX:
<br>
//KEYPRESSES: <span>0</span> TIMES
<br>
//TIME SINCE LAST PRESS:
<div id="output"></div></list>

<input id="text" placeholder="Type here">

构建一个根据打字速度定义字体的打字机生成器

Building a typewriter generator that defines the font-wight depending on typing speed

javascript

css

codepen