jquery实现心算练习代码


Posted in Javascript onDecember 06, 2010

在线演示:
http://demo.3water.com/js/jquery_xinsuan/index.htm
看看大家做完要多长时间,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<title>心算练习,Do Your Best</title> 
<style type="text/css"> 
body 
{ 
text-align: center; 
padding: 0; 
margin: 0; 
} 
div 
{ 
width: 1000px; 
margin: auto; 
} 
div table 
{ 
border-collapse: collapse; 
width: 100%; 
table-layout: fixed; 
text-align: left; 
} 
div table td 
{ 
border: 1px solid silver; 
padding-left: 3em; 
} 
div span 
{ 
padding: 3px 8px; 
} 
table input 
{ 
width: 3em; 
} 
.red 
{ 
color: Red; 
} 
.green 
{ 
color: Green; 
} 
</style> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.4.4.js"></script> 
<script type="text/javascript"> $(function () { 
fnInitTable(2); 
fnHideResult(); 
}); 
//显示正确结果及分数 
function fnShowResult() { 
var vCount = 0; 
$("table tr td").each(function (i) { 
var vUserResult = $.trim($(this).find("input").val()); 
var vCorrectResult = $.trim($(this).find("span:last-child").text()); 
if (vUserResult == vCorrectResult) { 
vCount++; 
$(this).find("span:last-child").show().addClass("green"); 
} 
else { 
$(this).find("span:last-child").show().addClass("red"); 
} 
}); 
$("#score").text(vCount); 
} 
function fnHideResult() { 
$("table td span:last-child").hide(); 
} 
//生成尾数不为零的随机数 
function fnRandomBy(parUnder, parOver) { 
var vResult = 0; 
while (vResult % 10 == 0) { 
switch (arguments.length) { 
case 1: 
vResult = parseInt(Math.random() * parUnder + 1); 
break; 
case 2: 
vResult = parseInt(Math.random() * (parOver - parUnder + 1) + parUnder); 
break; 
default: 
vResult = 0; 
break; 
} 
} 
return vResult; 
} 
function fnInitTable(parDigit) { 
var vPreValue; 
var vNextValue; 
var vResultt; 
$("table").empty(); 
for (var i = 0; i < 10; i++) { 
$("table").append("<tr></tr>"); 
for (var k = 0; k < 3; k++) { 
vPreValue = fnRandomBy(10, 100); 
if (parDigit == 2) { 
vNextValue = fnRandomBy(10, 100); 
} 
else { 
vNextValue = fnRandomBy(100, 1000); 
} 
vResultt = vPreValue * vNextValue; 
$("table tr:last").append("<td>" + vPreValue + "<span>×</span>" + vNextValue + "<span>=</span>" + "<input type='text' /\>" + "<span>" + vResultt + "</span>" + "</td>"); 
} 
$("table").append("</tr>"); 
} 
fnInit(); 
} 
function fnInit() { 
fnResetTime(); 
fnHideResult(); 
$("table input").attr("disabled", "true"); 
$("#score").text(""); 
} 
var vTimerID = 0; 
//开始按钮连续单击会使得时间加快,vContinueClick可判断是否连续单击,多谢小龙女提示 
var vContinueClick = 0; 
function fnBegin() { 
//分数的显示与否来确认是否单击结束按钮 
if ($.trim($("#score").text()) != "") { 
fnResetTime(); 
$("table input").val(""); 
} 
fnHideResult(); 
vContinueClick++; 
if (vContinueClick == 1) { 
vTimerID = setInterval("fnUpdateTime()", 1000); 
} 
$("table input").removeAttr("disabled"); 
} 
function fnPause() { 
vContinueClick = 0; 
$("table input").attr("disabled", "true"); 
clearInterval(vTimerID); 
} 
function fnStop() { 
fnPause(); 
fnShowResult(); 
} 
function fnResetTime() { 
$("#hour").text("00"); 
$("#minute").text("00"); 
$("#second").text("00"); 
} 
function fnUpdateTime() { 
//小龙女短时间内搞定,parseInt()的参数非常重要 
var vSecond = parseInt($("#second").text(), 10); 
var vMinute = parseInt($("#minute").text(), 10); 
var vHour = parseInt($("#hour").text(), 10); 
//处理秒数 
vSecond++; 
if (vSecond >= 0 && vSecond < 10) { 
$("#second").text("0" + vSecond); 
} else if (vSecond >= 10 && vSecond <= 60) { 
$("#second").text(vSecond); 
} else { 
$("#second").text("00"); 
//大于60秒,就需处理分钟 
vMinute++; 
if (vMinute >= 0 && vMinute <= 9) { 
$("#minute").text("0" + vMinute); 
} else if (vMinute >= 10 && vMinute <= 60) { 
$("#minute").text(vMinute); 
} else { 
$("#minute").text("00"); 
//处理小时 
vHour++; 
if (vHour >= 0 && vHour <= 9) { 
$("#hour").text("0" + vHour); 
} 
else { 
$("#hour").text(vHour); 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<div> 
<p> 
<span>计时:</span> <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span> 
<br /> 
<input type="button" name="" value="开始" onclick="fnBegin()" /> 
<input type="button" name="" value="暂停" onclick="fnPause()" /> 
<input type="button" name="" value="结束" onclick="fnStop()" /> 
<br /> 
<input type="button" name="pre" value="生成 2 × 2" onclick="fnInitTable(2)" /> 
<input type="button" name="" value="生成 2 × 3" onclick="fnInitTable(3)" /> 
<br /> 
分数:<span id="score"></span> 
</p> 
<table> 
</table> 
</div> 
</body> 
</html>

实现代码的过程中,有两个问题很棘手,一个是开始按钮连续单击,计时时间会迅速加快;二是如何判定玩家单击哪个按钮。问题得到小龙女的解答,加个标志位,好多问题就迎刃而解的。最大的收获就是代码的组织,若想代码量少,清晰的思路以及解决一个问题的好方法很重要。先实现,后优化,一种值得借鉴的方法!练习中还会有一些bug,希望大家多多指出!
Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 #Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 #Javascript
js对象的构造和继承实现代码
Dec 05 #Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
You might like
资料注册后发信小技巧
2006/10/09 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
MySQL最常见的操作语句小结
2015/05/07 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
预备党员党校学习自我评价分享
2013/11/12 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
地球一小时倡议书
2014/04/15 职场文书
2014年征兵标语
2014/06/20 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
北京天坛导游词
2015/02/12 职场文书
民政局未婚证明
2015/06/15 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android