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

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

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

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

需求:实现以下的功能

JavaScript实现打字测试功能

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

具体思路:

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

具体代码如下:

Html部分





 
 
 
 
 打字测试



 

打字测试

  • 错误

    0

  • 时间

    60s

  • 当前准确率%

    100

  • 打字速度

    30个/分

点击下放文本输入框开始打字!!!

本文题目:JavaScript实现打字测试功能-创新互联
文章位置:http://azwzsj.com/article/psphg.html