这篇文章运用简单易懂的例子给大家介绍JavaScript实现打字测试功能，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
需求：实现以下的功能
1.有三个小方块，分别用来当前输入的错误数量、打字的时间和当前的正确率。
2.下方是用来显示测试句子的容器。
3.最后是输入框
具体思路：
点击输入文本区域时，开始测试，会根据用户输入来统计当前的错误数和正确率，时间会减少。当输完整段句子时，会自动更新下一段句子。当时间为0时，游戏结束，文本框不能再输入，然后会统计打字速度。
具体代码如下：
Html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css" > <title>打字测试</title> </head> <body> <div class="type_content"> <h4>打字测试</h4> <ul class="type_box"> <li class="error_box"> <p class="error">错误</p> <p class="error_text">0</p> </li> <li class="time_box"> <p >时间</p> <p class="time_text">60s</p> </li> <li class="currcorrect_box"> <p >当前准确率%</p> <p class="currcorrect_text">100</p> </li> <li class="type_speed"> <p >打字速度</p> <p class="type_speed_text">30个/分</p> </li> </ul> <div class="text_box">点击下放文本输入框开始打字！！！</div> <div class="text_area"> <textarea name="" id="textarea_box" placeholder="start typing here..." oninput="processCurrentText()" onfocus="startGame()"> </textarea> </div> <button class="restart" onclick="resetValues()">重新开始</button> </div> <script src="./index.js"></script> </body> </html>