如何使用Javascript或者jQuery库显示Typing Speed？
时间：2020-03-06 15:05:07 来源:igfitidea点击:
我想在联系表单上使用的文本区域下方添加一个打字速度指示器。这只是出于娱乐目的，并且使用户在填写表单时可以与页面进行一些交互。
它应该在键入时显示平均速度，并在击键空闲时保持最后的平均速度。当他们离开文本区域时，应保持最后的平均值。
理想情况下，我希望有一个jQuery插件(如果有)。
[编辑]最初仅用于我的一些网站。但是，在我发布问题之后，令我震惊的是，这对于SO来说将是一个很好的功能。如果我们同意在这里投票
解决方案
打字速度通常以每分钟字数减去错字的罚分来计算。为此，我们似乎至少需要一个内联拼写检查器，以及一些繁重的语言和编码方案。 (然后开始变得复杂；例如，时钟什么时候开始？我们对输入代码的人怎么办？复制粘贴如何？)
一个极其简单，未经测试的实现：
var lastrun = new Date();
textarea.onkeyup = function() {
var words = textarea.value.split(' ');
var minutes_since_last_check = somefunctiontogetminutesdifference(new Date(), lastrun);
var wpm = (words.length-1)/minutes_since_last_check;
//show the wpm in a div or something
};
这是一个经过测试的实现，看起来还可以，但是我不保证数学。
演示：http://jsfiddle.net/iaezzy/pLpx5oLf/
和代码：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Type Speed</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<style type="text/css">
form {
margin: 20px auto;
width: 500px;
}
#textariffic {
width: 400px;
height: 400px;
font-size: 12px;
font-family: monospace;
line-height: 15px;
}
</style>
<script type="text/javascript">
$(function() {
$('textarea')
.keyup(checkSpeed);
});
var iLastTime = 0;
var iTime = 0;
var iTotal = 0;
var iKeys = 0;
function checkSpeed() {
iTime = new Date().getTime();
if (iLastTime != 0) {
iKeys++;
iTotal += iTime - iLastTime;
iWords = $('textarea').val().split(/\s/).length;
$('#CPM').html(Math.round(iKeys / iTotal * 6000, 2));
$('#WPM').html(Math.round(iWords / iTotal * 6000, 2));
}
iLastTime = iTime;
}
</script>
</head>
<body>
<form id="tipper">
<textarea id="textariffic"></textarea>
<p>
<span class="label">CPM</span>
<span id="CPM">0</span>
</p>
<p>
<span class="label">WPM</span>
<span id="WPM">0</span>
</p>
</form>
</body>
</html>
