<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ 300px; height:300px; background-color:#691e1e; } .char { 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 = 0; //总分 var speed = 5000; //速度,默认是5秒. var keyRight = 0; //输入正确的次数 var keyErro = 0; //输入错误次数 //组织字母 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[0] = "#ff2211"; Color[1] = "#ff3311"; Color[2] = "#ff5511"; Color[3] = "#ff8811"; Color[4] = "#ffBB99"; Color[5] = "#1ff4f1"; Color[6] = "#ff5566"; Color[7] = "#668899"; Color[8] = "#99BBfA"; Color[9] = "#fECECC"; return Color[parseInt(Math.random() * 10)]; //随机生颜色. } //按键码数组 var arrCode = new Array(); for (var i = 65; i <= 90; i++) { arrCode[i - 65] = i; } //随机生产一个字母 var randomChar = function () { off_x = Math.random() * 300 + 5; //在div横坐标 //off_y=Math.random()*500-10; //在div纵坐标 var c = charArray[parseInt(Math.random() * 25)]; //随机生成一个字母 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 -= 10; $("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 = 0; i <= arrCode.length; i++) { if (keyValue == arrCode[i] && $("#" + charArray[i] + "").text() != "") { //选对后停止一秒,然后删除字母 $("#" + charArray[i] + "").stop(1000).remove(); //选对就加10分 count += 10; $("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()", 1500); }) }) </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>