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>
