Html5 ABC小程序

来源：互联网发布：为什么登录淘宝就闪退编辑：程序博客网时间：2024/06/08 23:30

H5 ABC游戏小程序

根据随机出现的字母，键盘输入，判断是否正确

ABC.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>打字练习</title><link rel="stylesheet" href="abc.css"/></head><!--onkeyup 当键盘的按键松开时触发的事件--><body onkeyup="key(event);"><main id="char">F</main><footer id="foote">请在键盘上按下屏幕上显示的字母</footer></body><script src="abc.js"></script></html>

css样式

abc.css

html{   height: 100%;}body{height: 100%;/*径向渐变色*/background-image: radial-gradient(circle,#eee,#00CED1);text-align: center;}main{color: #00FF7F;font-size: 500px;/*文本阴影:x轴平移,y轴平移,模糊度,颜色*/text-shadow: 0 0 90px #000;}.right{animation: zoomIn 1s;/*animation-delay: 动画执行的animation-fill-mode: *//*动画两部分1 动画的设置:名称 时间 速度 延迟 次数等,写在选择器里面2 动画动作的过程@keyframes name{}*/}.error{color: red;animation: errors 2s;}@keyframes zoomIn{0%{transform: scale(0.3);/*透明度*/opacity: 0;}100%{opacity: 1;}}@keyframes errors{0%,10%,30%,50%,70%,90%{transform: translateX(-100px);}20%,40%,60%,80%,100%{transform: translateX(100px);}}

javascript 文件

abc.js

var char = document.getElementById('char');var result=document.getElementById('foote');var code = 0;var chars;var okCount = 0;var errorCount = 0;function showChar(){// math.floor向下取整code=Math.floor(Math.random() * 26);chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(code);char.innerHTML=chars; }showChar();function showResult(){var i=okCount/(okCount+errorCount) *100;if(errorCount > 0){// toFixed表示保留n个小数点    result.innerHTML="正确"+okCount+"个.错误"+errorCount+"个,正确率:"+i.toFixed(2)+"%";}}function key(event){// toUpperCase转化成大写字母var key = event.key.toUpperCase();function clearAnimation(){char.className="";}if(key == chars){showChar();char.className = "right";okCount++;// 暂停500ms后执行清除动画setTimeout(clearAnimation,500);}else{char.className = "error";errorCount++;setTimeout(clearAnimation,1000);}showResult();}

0 0