一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
如图实现一个在线打字的h5，根据屏幕出现的字面，盲打字母，正确输入时自动加载下一个字母，输入错误的话，出现错误动画效果，不加载下一个。同时统计正确个数，正确率。我们一起看看吧~
一：需求分析
1.字母出现动画是由中心向四周放大的效果。
@keyframes zoomIn {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1);
opacity:1;
}
}
2.正确输入时候，自动加载下一个字母。
var code = Math.floor(Math.random() * 26);// 获取：0~26 之间的随机数
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.charAt(code);// 获取与内容相对应的内容字母
3.错误输入时候，字母出现动画左右晃动的效果。
@keyframes slide{
10%, 30%, 50%, 70%, 90%{
transform: translateX(-50px);
}
20%, 40%, 60%, 80%, 100%{
transform: translateX(50px);
}
}
二：实现代码
1.html代码
<body onkeyup="key(event)">
<main class="name1" id="char1">
A
</main>
<div id="result">
请在键盘上输入字母
</div>
</body>
2.css代码
body {
height: 100%;
background-image: radial-gradient(circle, #fff, pink, red);
/*径向渐变色 从中心点向四周扩散 */
text-align: center;
overflow: hidden;
}
.name1 {
color: palevioletred;
font-size: 400px;
text-shadow: 10px 0 20px #000;
/*文本阴影 x轴（正右负左） y轴（正下负上） 阴影模糊度 */
}
#result {
color: darkorchid;
}
.right {
animation: zoomIn 1s;
}
@keyframes zoomIn {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1);
opacity:1;
}
}
.error{
color: purple;
animation: slide 1s;
}
@keyframes slide{
10%, 30%, 50%, 70%, 90%{
transform: translateX(-50px);
}
20%, 40%, 60%, 80%, 100%{
transform: translateX(50px);
}
}
3.js代码
var char = document.getElementById('char');
var chars;
var result = document.getElementById('result');
var okCount = 0;// 正确个数
var errorCount = 0;// 错误个数
function show() {
var code = Math.floor(Math.random() * 26);// 获取：0~26 之间的随机数
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.charAt(code);// 获取与内容相对应的内容字母
char.innerHTML = chars;
}
show(); // 执行函数
// 展示正确率
function showResult() {
var i = 0;
if (okCount > 0) {
i = okCount / (okCount + errorCount) * 100;
}
result.innerHTML='正确数'+okCount+',错误数'+errorCount+'正确率：'+i.toFixed(2)+'%';
}
// 鼠标按下事件
function key(event) {
okCount++;
var key = event.key.toUpperCase(); // 转大写
function clearAnimation() {
char.className = 'name1';
} // 清除动画
if (key == chars) {
show();// 弹出新字母
char.className = 'name1 right';// 添加输入正确的样式
setTimeout(clearAnimation, 500);// 暂停500毫秒后清除动画，执行clearanimation函数
} else {
errorCount++;
char.className = 'name1 error';// 添加输入错误的样式
setTimeout(clearAnimation, 500);
}
showResult();
}
如上就是打字练习的实现代码了，还是很有意思的，可以锻炼我们的盲打技术。也是一个小游戏，快动手做起来吧~
