字母打字练习--键盘事件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.which
let 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>
