键盘测试 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>键盘测试</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .containers{position:relative;margin-left:400px;top:50px;}
 9         .containers span{position:absolute;width:50px;height:50px;background:black;color:white;border-radius: 5px;text-align: center;line-height: 50px;}
10         .containers span.correct{background:blue;}
11         .containers span.error{background:red;}
12          .box{margin-top:100px;}
13         .box h2{margin-left:400px;width:600px;text-align: center;color:red;}
14         .word{margin-top:40px;}
15     </style>
16     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
17 </head>
18 <body>
19     <div class="box">
20         <h2>正确次数：<span class="rightNum">0</span>  打字次数：<span class="num">0</span> 正确率：<span class="rightRate">0%</span></h2>
21         <h2 class="word"><span class="currentLetter"></span></h2>
22     </div>
23     <div class="containers">
24         
25     </div>
26 </body>
27 <script type="text/javascript">
28     //键盘样式生成。
29     var index=0;
30     var keys=['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];
31     var num=0;
32     var rightNum=0;
33     var rightRate=0;
34     var currentIndex=0;
35     //生成随机字母。
36     function randomLetter(){
37         var currentIndex=Math.floor(Math.random()*26);
38         $('.currentLetter').text(keys[currentIndex]);
39     }
40     function  keyPress(event){
41         //验证敲得字母是否和应该敲击的符合，如果正确则敲击的显示为蓝色，如果不正确，则将敲击的那个显示为红色。
42         var event=event||window.event;
43         num++;
44         $('span.num').text(num);
45         //只有敲对了才可以继续往下进行。
46         if(String.fromCharCode(event.keyCode).toUpperCase()==$('.currentLetter').text()){
47             rightNum++;
48             $('span.rightNum').text(rightNum);
49             for(var i=0;i<keys.length;i++){
50                 if(keys[i]==String.fromCharCode(event.keyCode).toUpperCase()){
51                     $('.containers span').eq(i).addClass('correct').siblings().removeClass('correct error');
52                 }
53             }
54             randomLetter();
55         }
56         else{
57             for(var i=0;i<keys.length;i++){
58                 if(keys[i]==String.fromCharCode(event.keyCode).toUpperCase()){
59                     $('.containers span').eq(i).addClass('error').siblings().removeClass('error correct');
60                 }
61             }
62         }
63         rightRate=Math.floor(rightNum/num*100);
64         $('.rightRate').text(rightRate+'%');
65     }
66     function keyCreate(){
67         for(var i=0;i<3;i++){
68             for(var j=0;j<10-i;j++){
69                 if(index==26){
70                     return false;
71                 }
72                 var top=60*i+'px';
73                 var left=20*i+60*j+'px';
74                 var html='<span style="top:'+top+';left:'+left+'">'+keys[index]+'</span>';
75                 index++;
76                 $('.containers').append(html);
77             }
78         }
79     }
80     $(function(){
81         randomLetter();
82         keyCreate();
83         $(document).keypress(function(){
84             keyPress();
85         });
86     });
87     </script>
88 </html>

 

posted @ 2017-06-30 16:46  华~静看一季花开花落  阅读(405)  评论(0)    收藏  举报