看看大家做完要多长时间，不能上传附近，就只得贴代码。代码如下：
代码
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>心算练习，Do Your Best</title>
5 <style type="text/css">
6 body
7 {
8 text-align: center;
9 padding: 0;
10 margin: 0;
11 }
12 div
13 {
14 width: 1000px;
15 margin: auto;
16 }
17 div table
18 {
19 border-collapse: collapse;
20 width: 100%;
21 table-layout: fixed;
22 text-align: left;
23 }
24 div table td
25 {
26 border: 1px solid silver;
27 padding-left: 3em;
28 }
29 div span
30 {
31 padding: 3px 8px;
32 }
33 table input
34 {
35 width: 3em;
36 }
37 .red
38 {
39 color: Red;
40 }
41 .green
42 {
43 color: Green;
44 }
45 </style>
46 <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
47 <script type="text/javascript">
48
49 $(function () {
50 fnInitTable(2);
51 fnHideResult();
52 });
53
54 //显示正确结果及分数
55 function fnShowResult() {
56 var vCount = 0;
57 $("table tr td").each(function (i) {
58 var vUserResult = $.trim($(this).find("input").val());
59 var vCorrectResult = $.trim($(this).find("span:last-child").text());
60 if (vUserResult == vCorrectResult) {
61 vCount++;
62 $(this).find("span:last-child").show().addClass("green");
63 }
64 else {
65 $(this).find("span:last-child").show().addClass("red");
66 }
67 });
68 $("#score").text(vCount);
69 }
70
71 function fnHideResult() {
72 $("table td span:last-child").hide();
73 }
74
75 //生成尾数不为零的随机数
76 function fnRandomBy(parUnder, parOver) {
77 var vResult = 0;
78 while (vResult % 10 == 0) {
79 switch (arguments.length) {
80 case 1:
81 vResult = parseInt(Math.random() * parUnder + 1);
82 break;
83 case 2:
84 vResult = parseInt(Math.random() * (parOver - parUnder + 1) + parUnder);
85 break;
86 default:
87 vResult = 0;
88 break;
89 }
90 }
91 return vResult;
92 }
93
94 function fnInitTable(parDigit) {
95 var vPreValue;
96 var vNextValue;
97 var vResultt;
98 $("table").empty();
99 for (var i = 0; i < 10; i++) {
100 $("table").append("<tr></tr>");
101 for (var k = 0; k < 3; k++) {
102 vPreValue = fnRandomBy(10, 100);
103 if (parDigit == 2) {
104 vNextValue = fnRandomBy(10, 100);
105 }
106 else {
107 vNextValue = fnRandomBy(100, 1000);
108 }
109 vResultt = vPreValue * vNextValue;
110 $("table tr:last").append("<td>" + vPreValue + "<span>×</span>" + vNextValue + "<span>=</span>" + "<input type='text' /\>" + "<span>" + vResultt + "</span>" + "</td>");
111 }
112 $("table").append("</tr>");
113 }
114 fnInit();
115 }
116
117 function fnInit() {
118 fnResetTime();
119 fnHideResult();
120 $("table input").attr("disabled", "true");
121 $("#score").text("");
122 }
123
124 var vTimerID = 0;
125 //开始按钮连续单击会使得时间加快，vContinueClick可判断是否连续单击，多谢小龙女提示
126 var vContinueClick = 0;
127 function fnBegin() {
128 //分数的显示与否来确认是否单击结束按钮
129 if ($.trim($("#score").text()) != "") {
130 fnResetTime();
131 $("table input").val("");
132 }
133 fnHideResult();
134 vContinueClick++;
135 if (vContinueClick == 1) {
136 vTimerID = setInterval("fnUpdateTime()", 1000);
137 }
138 $("table input").removeAttr("disabled");
139 }
140
141 function fnPause() {
142 vContinueClick = 0;
143 $("table input").attr("disabled", "true");
144 clearInterval(vTimerID);
145 }
146
147 function fnStop() {
148 fnPause();
149 fnShowResult();
150 }
151
152 function fnResetTime() {
153 $("#hour").text("00");
154 $("#minute").text("00");
155 $("#second").text("00");
156
157 }
158
159 function fnUpdateTime() {
160 //小龙女短时间内搞定，parseInt()的参数非常重要
161 var vSecond = parseInt($("#second").text(), 10);
162 var vMinute = parseInt($("#minute").text(), 10);
163 var vHour = parseInt($("#hour").text(), 10);
164 //处理秒数
165 vSecond++;
166 if (vSecond >= 0 && vSecond < 10) {
167 $("#second").text("0" + vSecond);
168 } else if (vSecond >= 10 && vSecond <= 60) {
169 $("#second").text(vSecond);
170 } else {
171 $("#second").text("00");
172 //大于60秒，就需处理分钟
173 vMinute++;
174 if (vMinute >= 0 && vMinute <= 9) {
175 $("#minute").text("0" + vMinute);
176 } else if (vMinute >= 10 && vMinute <= 60) {
177 $("#minute").text(vMinute);
178 } else {
179 $("#minute").text("00");
180 //处理小时
181 vHour++;
182 if (vHour >= 0 && vHour <= 9) {
183 $("#hour").text("0" + vHour);
184 }
185 else {
186 $("#hour").text(vHour);
187 }
188 }
189 }
190 }
191 </script>
192 </head>
193 <body>
194 <div>
195 <p>
196 <span>计时：</span> <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>
197 <br />
198 <input type="button" name="" value="开始" onclick="fnBegin()" />
199 <input type="button" name="" value="暂停" onclick="fnPause()" />
200 <input type="button" name="" value="结束" onclick="fnStop()" />
201 <br />
202 <input type="button" name="pre" value="生成 2 × 2" onclick="fnInitTable(2)" />
203 <input type="button" name="" value="生成 2 × 3" onclick="fnInitTable(3)" />
204 <br />
205 分数：<span id="score"></span>
206 </p>
207 <table>
208 </table>
209 </div>
210 </body>
211 </html>
212
实现代码的过程中，有两个问题很棘手，一个是开始按钮连续单击，计时时间会迅速加快；二是如何判定玩家单击哪个按钮。问题得到小龙女的解答，加个标志位，好多问题就迎刃而解的。最大的收获就是代码的组织，若想代码量少，清晰的思路以及解决一个问题的好方法很重要。先实现，后优化，一种值得借鉴的方法！练习中还会有一些bug，希望大家多多指出！