创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
创新互联-专业网站定制、快速模板网站建设、高性价比衢江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式衢江网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖衢江地区。费用合理售后完善,十余年实体公司更值得信赖。这篇文章运用简单易懂的例子给大家介绍JavaScript实现打字测试功能,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
需求:实现以下的功能
1.有三个小方块,分别用来当前输入的错误数量、打字的时间和当前的正确率。
2.下方是用来显示测试句子的容器。
3.最后是输入框
具体思路:
点击输入文本区域时,开始测试,会根据用户输入来统计当前的错误数和正确率,时间会减少。当输完整段句子时,会自动更新下一段句子。当时间为0时,游戏结束,文本框不能再输入,然后会统计打字速度。
具体代码如下:
Html部分
打字测试 打字测试
错误
0
时间
60s
当前准确率%
100
打字速度
30个/分
点击下放文本输入框开始打字!!!