原生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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录