<html>
<head>
<meta charset="utf-8">
<title>打字游戏</title>
<!--引入animate.css动画库-->
<link rel="stylesheet" href="css1/animate1.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="public.js"></script>
<script>
// 按键正确： "animated zoomIn";
// 按键错误： "animated shake error";
//页面加载 char中随机显示 A--Z之间的任意一个字符 65 --- 90
//在页面中显示A--Z之间的任意一个字符
//初始化页面显示随机字母
function initShowMeter(){
var charNum=getRand(65,90);
$id("char").innerHTML=String.fromCharCode(charNum);
$id("char").className="animated zoomIn";
}
var zq=0;
var cw=0;
document.onkeypress=function(e){
var e=e||event;
var ch1=$id("char").innerHTML.toLowerCase();
var code=e.keyCode||e.which||e.charCode;
var ch2=String.fromCharCode(code);
if(ch1==ch2){
zq++;
$id("result").innerHTML = "正确"+zq+" 个，错误 "+cw+"个，正确率 "+((zq/(cw+zq)).toFixed(4))*100+" %";
$id("char").className="";
setTimeout(function(){
initShowMeter();
},300);
}else{
cw++;
$id("result").innerHTML = "正确"+zq+" 个，错误 "+cw+"个，正确率 "+((zq/(cw+zq)).toFixed(4))*100+" %";
$id("char").className="";
setTimeout(function(){
$id("char").className="animated shake error";
},300);
}
}
</script>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
