如何使用Javascript或jQuery库显示打字速度？ [英] How can you display Typing Speed using Javascript or the jQuery library?
问题描述
我想在我们在联系表单上使用的textarea下面添加一个打字速度指示器。它只是为了好玩，并在用户填写表单时为用户提供一些交互性。
I would like to add a typing speed indicator just below the textarea we use on our contact form. It is just for fun and to give the user some interactivity with the page while they are completing the form.
它应显示打字时的平均速度并保持最后的平均值当击键空闲时。当他们离开textarea时，最后的平均值应该坚持。
It should display the average speed while typing and keep the last average when the keystrokes are idle. When they leave the textarea the last average should stick.
理想情况下，我希望有一个jQuery插件，如果它可用。
Ideally I would like to have a jQuery plugin if it is available.
这最初仅针对我的一些网站。但是在我发布了这个问题后，它让我感到震惊，这对于SO来说是一个很好的功能。如果您同意在此投票
this was originally for just a few of my websites. But after I posted the question it struck me how this would be a neat feature for SO. If you agree vote here
推荐答案
这是一个经过测试的实现，看起来没问题，但我不保证数学。
Here's a tested implementation,which seems ok, but I don't guarantee the math.
演示：< a href =http://jsfiddle.net/iaezzy/pLpx5oLf/ =nofollow noreferrer> 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>
这篇关于如何使用Javascript或jQuery库显示打字速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
