本文实例为大家分享了JS实现简单打字测试的具体代码,供大家参考,具体内容如下
需求:实现以下的功能
1.有三个小方块,分别用来当前输入的错误数量、打字的时间和当前的正确率。
2.下方是用来显示测试句子的容器。
3.最后是输入框
具体思路:
点击输入文本区域时,开始测试,会根据用户输入来统计当前的错误数和正确率,时间会减少。当输完整段句子时,会自动更新下一段句子。当时间为0时,游戏结束,文本框不能再输入,然后会统计打字速度。
具体代码如下:
Html部分
打字测试打字测试
错误
0
时间
60s
当前准确率%
100
打字速度
30个/分
οninput="processCurrentText()"
οnfοcus="startGame()">
重新开始
CSS部分:
*{
margin: 0;
padding: 0;
}
.type_content{
width: 60%;
/* height: 440px; */
border: 1px solid #ccccff;
max-width: 600px;
margin: 50px auto;
border-radius: 8px;
position: relative;
min-width: 500px;
}
.type_content h3{
text-align: center;
margin: 10px 0px;
}
.type_box{
list-style: none;
width: 90%;
height: 100px;
/* border: 1px solid black; */
margin: 0 auto;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-around;
}
.type_box li{
width: 88px;
height: 88px;
/* border: 1px solid black; */
text-align: center;
font-size: 16px;
bor