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

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

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

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

需求：实现以下的功能

1.有三个小方块，分别用来当前输入的错误数量、打字的时间和当前的正确率。
2.下方是用来显示测试句子的容器。
3.最后是输入框

具体思路：

点击输入文本区域时，开始测试，会根据用户输入来统计当前的错误数和正确率，时间会减少。当输完整段句子时，会自动更新下一段句子。当时间为0时，游戏结束，文本框不能再输入，然后会统计打字速度。

具体代码如下：

Html部分

 
 
 
 
 



 

 
打字测试
 

  

  
错误
  
0
  
  

  
时间
  
60s
  
  

  
当前准确率%
  
100
  
  

  
打字速度
  
30个/分
  
 
 
点击下放文本输入框开始打字！！！
 

  
 
 重新开始
 
 

当前名称：JavaScript实现打字测试功能-创新互联
标题链接：http://6mz.cn/article/psphg.html