<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:#691e1e;
}
.char {
width: 20px;
height: 20px;
position: absolute;
font: 40px;
}
</style>
</head>
<body onkeypress="keyCode(event)">
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var off_x; //横坐标
var count = ; //总分
var speed = ; //速度,默认是5秒.
var keyRight = ; //输入正确的次数
var keyErro = ; //输入错误次数 //组织字母
var charArray = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"); var colorBox = function () {
Color = []; //用数组存放颜色的样式
Color[] = "#ff2211";
Color[] = "#ff3311";
Color[] = "#ff5511";
Color[] = "#ff8811";
Color[] = "#ffBB99";
Color[] = "#1ff4f1";
Color[] = "#ff5566";
Color[] = "#668899";
Color[] = "#99BBfA";
Color[] = "#fECECC";
return Color[parseInt(Math.random() * )]; //随机生颜色.
}
//按键码数组
var arrCode = new Array();
for (var i = ; i <= ; i++) {
arrCode[i - ] = i;
}
//随机生产一个字母
var randomChar = function () {
off_x = Math.random() * + ; //在div横坐标
//off_y=Math.random()*500-10; //在div纵坐标
var c = charArray[parseInt(Math.random() * )]; //随机生成一个字母
var charHtml = " <div class='char' id='" + c + "' style='left: " + off_x + "px;color:" + colorBox() + "'>" + c + "</div>";
$("#div1").append(charHtml);
}; //每隔三秒就调用些方法生产字母
function accrueChar() {
//把随机出来的放在动画队列里
var _sildeFun = [
//把要执行的动画依次放入一个数组里
function () {//自定义动画
$('#div1 div').animate({
top: '+=280px'
}, speed, function () {
//当动画执行完时,就删除,分数减10
$(this).remove();
count -= ;
$("input[type='text']").attr({ "value": count });
});
}
];
//将函数组放入slideList队列名的动画队列里
$("#div1").queue('slideList', _sildeFun);
var _takeStart = function () {
//从队列最前端移除一个队列函数，并执行他。
$("#div1").dequeue("slideList");
}; function randCharHandle() {
randomChar();//调用生成（随机生产字母）函数
_takeStart(); }
randCharHandle();
} //健码的处理
function keyCode(event) {
var keyValue = event.keyCode;//得到键值
var flag = false;
//alert(keyValue);
for (var i = ; i <= arrCode.length; i++) {
if (keyValue == arrCode[i] && $("#" + charArray[i] + "").text() != "") {
//选对后停止一秒,然后删除字母
$("#" + charArray[i] + "").stop().remove();
//选对就加10分
count += ;
$("input[type='text']").attr({ "value": count });
$("#right").text(keyRight); flag = true;
break;
}
}
if (flag) {
flag = false;
keyRight++;
$("#right").text(keyRight); } else {
keyErro++;
$("#erro").text(keyErro);
}
}
$(function () {
$("#but").click(function () {
window.setInterval("accrueChar()", );
})
})
</script>
<div id="div1"> </div>
<br>总数:<input type="text" readonly="readonly">
<br>错误次数:<label id="erro"></label>
<br>正确次数:<label id="right"></label>
<button id="but">开始</button>
</body> </html>