如何使用Javascript或jQuery庫顯示打字速度？

Question

我想在我們在聯系表單上使用的textarea下面添加一個打字速度指示器。 它只是為了好玩，並在完成表單時為用戶提供與頁面的一些交互性。

它應該在鍵入時顯示平均速度，並在擊鍵空閑時保持最后的平均值。 當他們離開textarea時，最后的平均值應該堅持下去。

理想情況下，我想有一個jQuery插件，如果它可用。

[編輯]這最初僅適用於我的一些網站。 但是在我發布了這個問題后，它讓我感到震驚，這對於SO來說是一個很好的功能。 如果您同意在這里投票

Answer 1

這是一個經過測試的實現，看起來沒問題，但我不保證數學。

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

Answer 2

打字速度通常以每分鍾的單詞減去拼寫錯誤的懲罰來計算。 要做到這一點，你似乎至少需要一個內聯拼寫檢查程序，加上語言和編碼方案的繁重工作。 （然后它開始變得復雜;例如，時鍾何時開始？你對輸入代碼的人做了什么？復制和粘貼怎么樣？）

Answer 3

這是我自己的自我介入：

<textarea id="b" onblur="clc();"></textarea>
<script>
t=0;
document.getElementById('b').onkeypress=function()
{
t==0 ? s=new Date() : e=new Date();
t=1;
}
function clc()
{
d = e.getTime() - s.getTime();
c = b.value.length;
b.value += "\n"+c+"s in "+d+"ms: "+c/d+" cpms";
}
</script>

我花了一個多星期從這個學習JavaScript（切割和切割）。 這將是一個很好的起點。 它現在很簡單，只需要解釋。 你可以添加任何東西。 它是最着名的極簡主義和最純粹的形式。

它只是讓你全部進入textarea： 在此輸入圖像描述

Answer 4

一個非常簡單， 未經測試的實現：

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
};

如何使用Javascript或jQuery庫顯示打字速度？

問題描述

4 個解決方案

解決方案1
10 已采納

解決方案2
1 2008-10-03 16:41:37

解決方案3
1 2014-04-07 09:37:39

解決方案4
-1 2008-10-03 16:48:02

如何使用Javascript或jQuery庫顯示打字速度？

問題描述

4 個解決方案

解決方案1 10 已采納

解決方案2 1 2008-10-03 16:41:37

解決方案3 1 2014-04-07 09:37:39

解決方案4 -1 2008-10-03 16:48:02

解決方案1
10 已采納

解決方案2
1 2008-10-03 16:41:37

解決方案3
1 2014-04-07 09:37:39

解決方案4
-1 2008-10-03 16:48:02