给朋友写的一个demo,比较简单,直接上代码了:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>Untitled Page</title>
5 <style type="text/css">
6 #Text1
7 {
8 width: 164px;
9 }
10 </style>
11 </head>
12 <body>
13
14 <p>
15 <input id="Text1" type="text" readonly="readonly" value="1" /></p>
16 <div style=" 168px; height: 176px">
17 <div id=1 style=" 51px; border: thin solid #000080;height: 56px;float: left; background-color: #C0C0C0; text-align: center; vertical-align: middle;">
18
19 1</div>
20 <div id=2 style=" 51px; border: thin solid #000080;height: 56px; float: left;text-align: center;">
21
22 2</div>
23 <div id=3 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
24
25 3</div>
26 <div id=4 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
27
28 4</div>
29 <div id=5 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
30
31 5</div>
32 <div id=6
33 style="border: thin solid #000080; 51px; height: 56px; float: left; text-align: center;">
34
35 6</div>
36 <div id=7 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
37
38 7</div>
39 <div id=8 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
40
41 8</div>
42 <div id=9 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
43
44 9</div>
45 </div>
46 <br />
47 方向键或数字键选择，回车键确定。
48 </body>
49 </html>
50
51 <script language=javascript>
52
53 var cur = 1;
54 document.onkeydown = function () {
55 //向左
56 if (window.event.keyCode == 37) {
57 if (cur != 1 && cur != 4 && cur != 7) {
58 document.getElementById(cur).style.background = "#FFFFFF";
59 cur--;
60 document.getElementById(cur).style.background = "#C0C0C0";
61 }
62 }
63
64 //向右
65 if (window.event.keyCode == 39) {
66 if (cur != 3 && cur != 6 && cur != 9) {
67 document.getElementById(cur).style.background = "#FFFFFF";
68 cur++;
69 document.getElementById(cur).style.background = "#C0C0C0";
70 }
71 }
72
73 //向上
74 if (window.event.keyCode == 38) {
75 if (cur != 1 && cur != 2 && cur != 3) {
76 document.getElementById(cur).style.background = "#FFFFFF";
77 cur -= 3;
78 document.getElementById(cur).style.background = "#C0C0C0";
79 }
80 }
81
82 //向下
83 if (window.event.keyCode == 40) {
84 if (cur != 7 && cur != 8 && cur != 9) {
85 document.getElementById(cur).style.background = "#FFFFFF";
86 cur += 3;
87 document.getElementById(cur).style.background = "#C0C0C0";
88 }
89 }
90
91 //回车
92 if (window.event.keyCode == 13)
93 document.getElementById('Text1').value = cur;
94
95 //数字键
96 if (window.event.keyCode > 48 && window.event.keyCode < 58) {
97 document.getElementById(cur).style.background = "#FFFFFF";
98 cur = window.event.keyCode - 48;
99 document.getElementById(cur).style.background = "#C0C0C0";
100 }
101
102
103 }
104
105 </script>
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>Untitled Page</title>
5 <style type="text/css">
6 #Text1
7 {
8 width: 164px;
9 }
10 </style>
11 </head>
12 <body>
13
14 <p>
15 <input id="Text1" type="text" readonly="readonly" value="1" /></p>
16 <div style=" 168px; height: 176px">
17 <div id=1 style=" 51px; border: thin solid #000080;height: 56px;float: left; background-color: #C0C0C0; text-align: center; vertical-align: middle;">
18
19 1</div>
20 <div id=2 style=" 51px; border: thin solid #000080;height: 56px; float: left;text-align: center;">
21
22 2</div>
23 <div id=3 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
24
25 3</div>
26 <div id=4 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
27
28 4</div>
29 <div id=5 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
30
31 5</div>
32 <div id=6
33 style="border: thin solid #000080; 51px; height: 56px; float: left; text-align: center;">
34
35 6</div>
36 <div id=7 style=" 51px;border: thin solid #000080; height: 56px;float: left;text-align: center;">
37
38 7</div>
39 <div id=8 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
40
41 8</div>
42 <div id=9 style=" 51px; border: thin solid #000080;height: 56px;float: left;text-align: center;">
43
44 9</div>
45 </div>
46 <br />
47 方向键或数字键选择，回车键确定。
48 </body>
49 </html>
50
51 <script language=javascript>
52
53 var cur = 1;
54 document.onkeydown = function () {
55 //向左
56 if (window.event.keyCode == 37) {
57 if (cur != 1 && cur != 4 && cur != 7) {
58 document.getElementById(cur).style.background = "#FFFFFF";
59 cur--;
60 document.getElementById(cur).style.background = "#C0C0C0";
61 }
62 }
63
64 //向右
65 if (window.event.keyCode == 39) {
66 if (cur != 3 && cur != 6 && cur != 9) {
67 document.getElementById(cur).style.background = "#FFFFFF";
68 cur++;
69 document.getElementById(cur).style.background = "#C0C0C0";
70 }
71 }
72
73 //向上
74 if (window.event.keyCode == 38) {
75 if (cur != 1 && cur != 2 && cur != 3) {
76 document.getElementById(cur).style.background = "#FFFFFF";
77 cur -= 3;
78 document.getElementById(cur).style.background = "#C0C0C0";
79 }
80 }
81
82 //向下
83 if (window.event.keyCode == 40) {
84 if (cur != 7 && cur != 8 && cur != 9) {
85 document.getElementById(cur).style.background = "#FFFFFF";
86 cur += 3;
87 document.getElementById(cur).style.background = "#C0C0C0";
88 }
89 }
90
91 //回车
92 if (window.event.keyCode == 13)
93 document.getElementById('Text1').value = cur;
94
95 //数字键
96 if (window.event.keyCode > 48 && window.event.keyCode < 58) {
97 document.getElementById(cur).style.background = "#FFFFFF";
98 cur = window.event.keyCode - 48;
99 document.getElementById(cur).style.background = "#C0C0C0";
100 }
101
102
103 }
104
105 </script>