html打字练习测试代码,JS实现简单打字测试

本文实例为大家分享了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