JavaScript实现打字测试功能-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

创新互联-专业网站定制、快速模板网站建设、高性价比衢江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式衢江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖衢江地区。费用合理售后完善，十余年实体公司更值得信赖。

这篇文章运用简单易懂的例子给大家介绍JavaScript实现打字测试功能，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

需求：实现以下的功能

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>

网页标题：JavaScript实现打字测试功能-创新互联
浏览路径：https://www.cdcxhl.com/article46/psphg.html

成都网站建设公司_创新互联，为您提供企业建站、搜索引擎优化、网站收录、云服务器、企业网站制作、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容