jquery实现心算练习
2024-05-01 12:18:36
看看大家做完要多长时间，不能上传附近，就只得贴代码。代码如下：
代码
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
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，希望大家多多指出！
转载于:https://www.cnblogs.com/qingliuyu/archive/2010/12/06/1897376.html
jquery实现心算练习相关推荐
- Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
- Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
- jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
- jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
- 在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
- 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...
- jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用 可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- 利用 jquery 获取某个元素下的所有图片并改变其属性
HTML代码 <div id="mochu"> <p>内容....<./p> <p><img src="xxxx.p ...
最新文章
- 面向对象模型的四种核心技术
- EBU6042 Paper A ‐ SOLUTIONS
- cmd mysql log_如何使用mysqlbinlog工具？
- hadoop2 Ubuntu 下安装部署
- struts2异常处理
- 【活体检测】二分类活体检测评价方式
- php base64_decode 图片,php读取和保存base64编码图片
- 《Cisco安全防火墙服务模块（FWSM）解决方案》——2.6 硬件架构
- 微信机器人控制linux,微信运维交互机器人的示例代码
- 大数据应用场景和大数据职业发展需要掌握的技术技能构成
- 实现div元素在整个屏幕的的垂直居中之translateY(-50%)的利用
- 总结一下Android中主题(Theme)的正确玩法
- 深入理解Nginx 读书笔记
- Mac升级Catalina，根目录下无法创建个人文件夹
- 一页纸说清楚“什么是深度学习？”
- 适合新手练手的三个python简单小游戏
- 超全的iOS面试题汇总
- 电脑连接WIFI后，只能登录微信QQ，网页其他打不开问题
- 2022北京冬奥会开幕式里的黑科技，闪耀闪耀全世界
- Openjudge：万年历
热门文章
- 使用FortJs使用现代JavaScript开发Node.js
- aws lambda_为什么我会自动删除所有旧的推文以及我用来执行此操作的AWS Lambda函数...
- 利用python实现IP扫描
- mysql8.0 服务移除_Linux下彻底删除Mysql 8.0服务的方法
- hung-yi lee_p17_卷积神经网络
- trogan连接不上_解决连接不上网（Connection not connected）.doc
- 微软推出Windows XP/Server 2003紧急安全补丁：修复远程桌面CVE-2019-0708漏洞
- spring boot 临时文件过期
- Apache网页优化之网页压缩
- 【ASP.NET Core】解决“The required antiforgery cookie xxx is not present”的错误