您的位置：首页 > 移动开发 > 微信开发

Html5 ABC小程序

2016-08-23 18:20 190 查看

H5 ABC游戏小程序

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

ABC.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>打字练习</title>
<link rel="stylesheet" href="abc.css"/>
</head>

<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();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航