How can you display Typing Speed using Javascript or the jQuery library?

后端未结

关注

 4  575

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 t

相关标签:

4条回答

轮回少年

2021-02-09 04:36

Here's a tested implementation,which seems ok, but I don't guarantee the math.

A Demo: http://jsfiddle.net/iaezzy/pLpx5oLf/

And the code:

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

0 讨论(0)

野性不改

2021-02-09 04:47
It's my own ego involvement:
```
<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>
```
I spent over a week on this learning JavaScript from zero (cutting and cutting). This will be a good starting point. It's now so simple that needs bare explanation. You could add anything to it. Its the best known minimalist and purest form.

It just gives you all into a textarea:
0 讨论(0)
发布评论:

提交评论
- 加载中...

闹比i

2021-02-09 04:49

a horribly simple, untested implementation:

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

0 讨论(0)

北荒

2021-02-09 04:56

Typing speed is generally computed in words per minute minus a penalty for typos. To do this it seems like you'd need an inline spell-checker at the very least, plus some heavy lifting for languages and encoding schemes. (And then it starts to get complicated; when does the clock start, for instance? What do you do about people who are entering code? How about copy-and-pasting?)

0 讨论(0)
发布评论:

提交评论
- 加载中...