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

我想在我們的聯繫表單上使用的textarea下面添加一個打字速度指示器。這只是爲了好玩，並在完成表單時爲用戶提供一些與頁面的交互性。如何使用Javascript或jQuery庫顯示打字速度？

它應該在鍵入時顯示平均速度並在鍵盤空閒時保持最後的平均值。當他們離開textarea時，最後的平均值應該保持不變。

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

[編輯]這本來只是我的幾個網站。但是在我發佈這個問題之後，它讓我覺得這對於SO來說是一個很好的特性。如果您同意vote here

來源

2008-10-03 Brian Boatright

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

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

來源

2008-10-03 17:09:37 enobrev

這是完美的，並與演示，謝謝！ – 2008-10-03 17:15:45

您的意思是使這個維基答案？對於這個詳細的答案，你當然應該得到一些重要的回答。 – 2008-10-03 17:18:08

打字速度通常以每分鐘的文字數減去拼寫錯誤的罰分來計算。要做到這一點，似乎至少需要一個內聯拼寫檢查器，再加上一些繁重的語言和編碼方案。（然後開始變得複雜;例如，什麼時候開始時鐘？你怎麼處理輸入代碼的人？如何複製和粘貼？）

來源

2008-10-03 16:41:37

如此。我的初衷是在聯繫表單上使用它，所以不會出現像SO那樣的代碼或複製/粘貼問題。 – 2008-10-03 17:12:02

-1

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

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

來源

2008-10-03 16:48:02 Jared

這是我自己的自我參與：

<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： enter image description here

來源

2014-04-07 09:37:39 Xsi

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

回答

相關問題