Как вы можете отобразить скорость набора текста с помощью Javascript или библиотеки jQuery? - PullRequest
Новая
       28

Как вы можете отобразить скорость набора текста с помощью Javascript или библиотеки jQuery?

6 голосов
/ 03 октября 2008

Я хотел бы добавить индикатор скорости набора текста чуть ниже текстовой области, которую мы используем в нашей контактной форме. Это просто для развлечения и для того, чтобы дать пользователю некоторую интерактивность со страницей, пока они заполняют форму.

Он должен отображать среднюю скорость при наборе текста и сохранять последнее среднее значение, когда нажатия клавиш не используются. Когда они покидают текстовое поле, последний средний должен придерживаться.

В идеале я хотел бы иметь плагин jQuery, если он доступен.

[Edit] это было первоначально для нескольких моих сайтов. Но после того, как я опубликовал вопрос, меня поразило, как это будет отличной особенностью для SO. Если вы согласны проголосуйте здесь

Ответы [ 4 ]

10 голосов
/ 03 октября 2008

Вот проверенная реализация, которая выглядит нормально, но я не гарантирую математику.

Демо: 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>
1 голос
/ 07 апреля 2014

Это мое личное участие в эго: 

<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 с нуля (вырезание и вырезание) Это будет хорошей отправной точкой. Теперь это так просто, что нуждается в пояснениях. Вы можете добавить что-нибудь к этому. Его самая известная минималистская и чистейшая форма.

Это просто дает вам все в текстовой области: enter image description here

1 голос
/ 03 октября 2008

Скорость набора обычно рассчитывается в словах в минуту минус штраф за опечатки. Для этого кажется, что вам по крайней мере понадобится встроенная проверка орфографии, а также некоторая тяжелая работа с языками и схемами кодирования. (А потом все становится сложнее; когда, например, запускаются часы? Что вы делаете с людьми, которые вводят код? Как насчет копирования и вставки?)

0 голосов
/ 03 октября 2008

ужасно простая, непроверенная реализация: 

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
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...