आप जावास्क्रिप्ट या jQuery लाइब्रेरी का उपयोग कर टाइपिंग स्पीड कैसे प्रदर्शित कर सकते हैं?

मैं अपने संपर्क फ़ॉर्म पर उपयोग किए गए टेक्स्टरेरा के ठीक नीचे एक टाइपिंग स्पीड इंडिकेटर जोड़ना चाहता हूं। यह सिर्फ मजेदार है और उपयोगकर्ता को फ़ॉर्म को पूरा करते समय पृष्ठ के साथ कुछ अंतःक्रियाशीलता प्रदान करना है।आप जावास्क्रिप्ट या jQuery लाइब्रेरी का उपयोग कर टाइपिंग स्पीड कैसे प्रदर्शित कर सकते हैं?

टाइपिंग करते समय औसत गति प्रदर्शित करना चाहिए और कुंजीस्ट्रोक निष्क्रिय होने पर अंतिम औसत रखना चाहिए। जब वे textarea छोड़ते हैं तो अंतिम औसत छड़ी चाहिए।

आदर्श रूप से यदि यह उपलब्ध है तो मैं एक jQuery प्लगइन रखना चाहता हूं।

[संपादित करें] यह मूल रूप से मेरी कुछ वेबसाइटों के लिए था। लेकिन जब मैंने सवाल पोस्ट किया तो उसने मुझे मारा कि यह एसओ के लिए एक साफ सुविधा कैसे होगी। यदि आप 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

जो सही और डेमो के साथ है, धन्यवाद! –

क्या आपका यह विकी जवाब बनाने का मतलब था? इस विस्तृत उत्तर के लिए आप निश्चित रूप से कुछ प्रतिनिधि बिंदुओं के लायक हैं। –

यह सुनिश्चित नहीं था कि विकी उत्तर की बात क्या थी। – enobrev

टाइपिंग की गति आमतौर पर टाइप प्रति मिनट शब्दों में गणना की जाती है। ऐसा करने के लिए ऐसा लगता है कि आपको कम से कम एक इनलाइन वर्तनी-जांचकर्ता की आवश्यकता होगी, साथ ही भाषाओं और एन्कोडिंग योजनाओं के लिए कुछ भारी उठाने की आवश्यकता होगी। (और फिर यह जटिल पाने के लिए शुरू होता है,?, उदाहरण के लिए जब घड़ी शुरू करता है आप लोग हैं, जो कोड में प्रवेश कर रहे के बारे में क्या करते हैं कैसे कॉपी और चिपकाने के बारे में?)

स्रोत

2008-10-03 16:41:37

सच। मेरा मूल उद्देश्य इसे एक संपर्क फ़ॉर्म पर उपयोग करना था, इसलिए कोड के उन मुद्दों या कॉपी/पेस्ट जैसे एसओ के लिए नहीं होगा। –

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

मैं शून्य से सीखने जावास्क्रिप्ट पर एक सप्ताह से अधिक खर्च (काटने और काट रहा है)। यह एक अच्छा प्रारंभिक बिंदु होगा। अब यह इतना आसान है कि नंगे स्पष्टीकरण की जरूरत है। आप इसमें कुछ भी जोड़ सकते हैं। यह सबसे अच्छा ज्ञात minimalist और शुद्ध रूप है।

यह सिर्फ आप सभी देता है एक पाठ क्षेत्र में: enter image description here

स्रोत

2014-04-07 09:37:39 Xsi

यह बहुत अच्छा है! विशेष रूप से इस पर विचार करने के लिए आपने जेएस सीखा है :) केवल एक ही दोष है, यदि आप अपने माउस को टेक्स्टरेरा के बाहर गलती से क्लिक करते हैं तो यह खराब हो जाता है। –

आप जावास्क्रिप्ट या jQuery लाइब्रेरी का उपयोग कर टाइपिंग स्पीड कैसे प्रदर्शित कर सकते हैं?

उत्तर

संबंधित मुद्दे