原生js打字速度测试代码

简单的原生js打字速度测试代码，示例文字可以自行更换，点击开始打字按钮开始测试，打完点击结束打字按钮，会根据你打完的字数来计算你每分钟打多少字。

JS代码

<script type="text/javascript"> 
    function _class(str) { 
        return document.getElementsByClassName(str); 
    } 
    var fontstring = _class("fontString")[0]; 
    var strExample = "网上打字测试，点开始之后可以开始打字，按下第一个键之后开始计时，" + 
        "打字结束之后可以按计算速度计算你刚才打字的速度，下方同时显示错误的字数、经过的时间。" + 
        "打错的字是红色显示，正确的是蓝色字，还没有打的是黑色。" 
    var costTime = _class("time")[0]; 
    var costtime = 0; 
    var errorcount = 0; 
    var timer; 
    var haveEnter = false; 
    var fonttextarea = _class("fontTextarea")[0]; 
    var beginbtn = _class("beginBtn")[0], 
        finishbtn = _class("finishBtn")[0]; 
    var error = _class("error")[0], 
        speed = _class("speed")[0]; 
    window.onload = function () { 
        fonttextarea.disabled = true; 
        fontstring.innerText = strExample; 
        fonttextarea.onkeydown = function () { 
            var strcount = 0; 
            var str = ""; 
            if (fonttextarea.value == "") return; 
            if (!haveEnter) { 
                haveEnter = true; 
                costtime = 0; 
                timer = setInterval(function () { 
                    showtimeFun(); 
                }, 1000); 
            } 
            for (var i = 0; i < strExample.length - 1; i++) { 
                if (i < fonttextarea.value.length) { 
                    if (fonttextarea.value.slice(i, i + 1) == strExample.slice(i, i + 1)) { 
                        str = str + "<span class='rightfont'>" + strExample.slice(i, i + 1) + "</span>"; 
                    } 
                    else { 
                        str = str + "<span class='errorfont'>" + strExample.slice(i, i + 1) + "</span>"; 
                        strcount++; 
                    } 
                } 
                else { 
                    str = str + strExample.slice(i, i + 1); 
                } 
            } 
            errorcount = strcount; 
            fontstring.innerHTML = str; 
            error.innerText = errorcount; 
        } 
        function showtimeFun() { 
            costtime++; 
            costTime.innerText = costtime; 
        } 
        beginbtn.onclick = function () { 
            errorcount = 0; 
            fontstring.innerText = strExample; 
            fonttextarea.value = ""; 
            fonttextarea.disabled = false; 
            fonttextarea.focus(); 
            error.innerText = errorcount; 
            speed.innerText = "0"; 
        } 
        finishbtn.onclick = function () { 
            clearInterval(timer); 
            costTime.innerText = 0; 
            fonttextarea.disabled = true; 
            var sp = 0; 
            if (fonttextarea.value == "") { 
                return sp; 
            } else { 
                sp = Number(fonttextarea.value.length * 60 / costtime).toFixed(2); 
                speed.innerText = sp; 
                haveEnter = false; 
            } 
        } 
    } 
</script>

打赏

微信扫一扫，打赏作者吧～