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