随机一个数字键盘打印打字练习
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>打字</title>
<style>
#round {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 50%;
margin: auto;
font-size: 300px;
text-align: center;
line-height: 400px;
}
p {
font-weight: 400;
text-align: center;
font-size: 26px;
}
@keyframes zoomIn {
0% {
transform: scale(0.1);
}
100% {
transform: scale(1.1);
}
}
.right {
animation: zoomIn 0.3s linear;
animation-fill-mode: both;
}
@keyframes shake {
0%,
50% {
transform: translateX(-50px);
}
25%,
75% {
transform: translateX(50px);
}
100% {
transform: translateX(0px);
}
}
.wrong {
animation: shake 0.3s linear;
animation-fill-mode: both;
color: red;
}
</style>
</head>
<body>
<div id=”round”>
<section>A</section>
</div>
<p>正确：0个，错误：0个，正确率0%</p>
<script>
var div = document.querySelector(“#round”)
var section = document.querySelector(“#round>section”);
var p = document.querySelector(“p”)
// 创建一个空数组 然后向数组中添加A-Z 26个字母
var charArray = [];
for (var i = 65; i < 91; i++) {
// String.fromCharCode 把一个ASCII码值转为对应的字符
var ch = String.fromCharCode(i);
charArray.push(ch);
}
// 生成随机字母的函数
function showRabdomChar() {
var index = Math.floor(Math.random() * 26);
var c = charArray[index];
section.innerHTML = c;
}
showRabdomChar();
var rightNumber = 0;
var wrongNumber = 0;
document.body.onkeydown = function (e) {
var keyName = e.key.toUpperCase();
if (keyName == section.innerHTML) {
console.log(“正确”);
showRabdomChar();
section.classList.add(“right”);
setTimeout(function () {
section.classList.remove(“rigth”);
}, 300);
rightNumber++;
} else {
console.log(“错误”);
section.classList.add(“wrong”);
setTimeout(function () {
section.classList.remove(“wrong”);
}, 300);
wrongNumber++;
}
var rate = rightNumber / (rightNumber + wrongNumber);
rate = rate * 100;
rate = rate.toFixed(2);
p.innerHTML = “正确：” + rightNumber + “个，错误：” + wrongNumber + “个，正确率：” + rate + “%”;
};
</script>
</body>
</html>
//效果图如下:
版权声明：本文为yangcaicai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。