如何使用Javascript或jQuery库显示打字速度？

Question

如何使用Javascript或jQuery库显示打字速度？

Bri*_*ght 6 javascript

我想在我们在联系表单上使用的textarea下面添加一个打字速度指示器.它只是为了好玩,并在完成表单时为用户提供与页面的一些交互性.

它应该在键入时显示平均速度,并在击键空闲时保持最后的平均值.当他们离开textarea时,最后的平均值应该坚持下去.

理想情况下,我想有一个jQuery插件,如果它可用.

[编辑]这最初仅适用于我的一些网站.但是在我发布了这个问题后,它让我感到震惊,这对于SO来说是一个很好的功能.如果您同意在这里投票

Answer 1

eno*_*rev 10

这是一个经过测试的实现,看起来没问题,但我不保证数学.

演示: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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，11 月前
查看次数：	8947 次
最近记录：	10 年，4 月前