字母打字练习--键盘事件onkeydown--keycode - css，效果如图所示
html
<html><head><meta charset="utf-8"><title>打字游戏</title><!--引入animate.css动画库--><link rel="stylesheet" href="animate.css"><style>body {margin: 0;/*开启弹性布局，并让弹性布局中的子元素水平居中对齐，垂直居中对齐*/display: flex;justify-content: center;align-items: center;/*文字居中*/text-align: center;/*设置背景颜色的经像渐变*/background: radial-gradient(circle, #444, #111, #000);}#char {font-size: 400px;color: lightgreen;/*设置文字阴影*//*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*//*位置可以为负值*/text-shadow: 0 0 50px #666;}#result {font-size: 20px;color: #888;}/*找到id为char及类名为error的div元素*/#char.error {color: red;}</style></head><body><mian><div id="char">A</div><div id="result">请在按键上按下屏幕上显示的字母</div></mian></body></html><script src="common.js"></script><script>// 按键正确： "animated zoomIn";// 按键错误： "animated shake error";//页面加载 char中随机显示 A--Z之间的任意一个字符 65 --- 90//在页面中显示A--Z之间的任意一个字符//初始化页面显示随机字母//1给页面初始化随机大写字母，在char中显示//2.给document注册一个onkeydowng事件//3.获取char的innderHTML值 cVal;//4.获取对应的按键的键码值//5.根据键码值得一个字符 String.fromCharCode(键码值);//6.用字符与cVal进行判断，如果相等表示输入正确，否则表示输入错误//7.正确，难char设置正确class动画效果//立即给char切换到下一个字母//统计正确个数//统计正确率//8.错误，难char设置错误class动画效果//统计错误个数//统计正确率function toPercent(point) {var str = Number(point * 100).toFixed(1);str += "%";return str;}let $letter = $('#char');let $content = $('#result');let rigCount = 0;let errCount = 0;$letter.innerHTML = String.fromCharCode(getRandom(90, 65));document.onkeydown = function (e) {e = e || window.event;var code = e.keyCode || e.whichlet key = String.fromCharCode(e.keyCode)// console.log(key);// console.log($letter.innerHTML)if (key == $letter.innerHTML) {$letter.innerHTML = String.fromCharCode(getRandom(90, 65));$letter.className = 'animated zoomIn';rigCount++;}else {$letter.className = 'animated shake error';errCount++;let count = rigCount / (rigCount + errCount);$content.innerHTML = "答对" + errCount + "道，答错" + rigCount + "道，正确率" + toPercent(count);}}</script>
