1. 效果
2. html代码
<!doctype html>
<html><head><meta charset="utf-8" /><title>打字练习</title><!--引入第三方动画库--><link rel="stylesheet" href="animate.css"><style>html {height: 100%;}body {/*设置径向渐变的背景颜色*/background: radial-gradient(circle, #444, #000, #000);/*元素高度*/height: 100%;/*text-align属性指定元素文本的水平对齐方式。*/text-align: center;/*开启弹性布局*/display: flex;/*设置弹性布局的子元素水平方向居中排列*/justify-content: center;/*设置弹性布局的子元素水平方向居中排列*/align-items: center;/*设置元素外边距为0,因为元素默认自带8px外边距*/margin: 0;/*截取溢出内容元素，防止出现滚动条*/overflow: hidden;}#char {/*字体颜色*/color: lightgreen;/*字体大小*/font-size: 400px;/*设置文字阴影效果，语法是text-shadow:水平阴影的位置 垂直阴影的位置 模糊的距离 阴影的颜色;位置允许负值*/text-shadow: 0 0 50px black;}#result {/*文字颜色*/color: #555;}#char.error {/*文字颜色*/color: yellow;}</style>
</head><body><main><section id="char">H</section><section id="result">请在键盘上按下屏幕上显示的字母</section></main><script src="dazi.js"></script>
</body></html>
2. 引入动画库文件
3. js代码
// 设置一系列的变量
var code;
var okCount = 0;
var errorCount = 0;// 获取DOM节点char
var charBox = document.querySelector('#char');// 获取26个英文字母
function show() {// 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：var rand = Math.random();// 获取到0~25之间的数字code = rand * 26;// 将code向下取整，最终获取到0~25一共26个整数code = Math.floor(code);// 因为在ACSII编码表中对应A-Z 26个字母对应的编码为65-90;code = code + 65;// 将ACSII 编码转为一个字符:var char = String.fromCharCode(code);// 将获取到的26个字母插入到char DOM节点里charBox.innerText = char;
}
// 调用show函数让它执行
show()//onkeyup 事件会在键盘按键被松开时发生window.onkeyup = function(ev) {// 获取按下的键盘按键Unicode值var key = ev.keyCode;// 当键盘按下的字母对应的Unicode值等于出现的值，执行以下代码if (key == code) {// 正确个数+1okCount++;// 再一次执行show函数show();// 给 charBox 添加动画效果charBox.className = 'animated zoomIn';// 延迟500毫秒执行clearAnimate函数// 若不清除class类名，则下一次出现不会产生效果setTimeout(clearAnimate, 500);} else {// 错误个数+1errorCount++;// 给 charBox 添加动画效果charBox.className = 'animated shake error';// 延迟500毫秒执行clearAnimate函数// 若不清除class类名，则下一次出现不会产生效果setTimeout(clearAnimate, 500);}// 调用showResult函数并执行一次showResult();}// 清除动画效果的函数
function clearAnimate() {charBox.className = "animated";
}
// 正确个数，错误个数，正确率的函数
function showResult() {// 计算正确率var ratio = 100 * okCount / (okCount + errorCount);// 将计算后的正确个数，错误个数，正确率插入到id为result的标签内document.querySelector('#result').innerText ='正确 ' + okCount + ' 个，' +'错误 ' + errorCount + ' 个，' +// toFixed(2) 保留小数点后两位'正确率 ' + ratio.toFixed(2) + '%'
}