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) {
// 正确个数+1
okCount++;
// 再一次执行show函数
show();
// 给 charBox 添加动画效果
charBox.className = 'animated zoomIn';
// 延迟500毫秒执行clearAnimate函数
// 若不清除class类名，则下一次出现不会产生效果
setTimeout(clearAnimate, 500);
} else {
// 错误个数+1
errorCount++;
// 给 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) + '%'
}