广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

今日闲来无事，想试一试模拟打字游戏，下面是效果图，会记录判断打字，如果在外围添加setInterval函数，可以实现测试打字速度的功能。

html

<div class="wrapper">  <div id="text">A</div>  <input type="text" id="ipt"></div>

css

body,html {  width: 100%;  height: 100%; } .wrapper {  width: 400px;  margin: 20px auto; } div {  font-size: 100px;  font-weight: 900;  text-align: center; } input{  width: 400px;  margin: 20px auto; }

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'var text = document.getElementById('text') var ipt = document.getElementById('ipt')var res;var newRes;var random = Math.round(Math.random() * 25);var count = 0 window.onkeyup = function (e) {  var random = Math.round(Math.random() * 25);  newRes = str[random]  res = text.innerHTML  text.innerHTML = newRes  if(e.keyCode == res.charCodeAt(0)){   count++;   ipt.value = '';  }else{   alert('game over' + '   ' +'您的得分是'+ ':' + count)   count = 0;   ipt.value = '';  } }

相关推荐：【JavaScript视频教程】

以上就是用JavaScript模拟实现打字小游戏！的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~