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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python 实现一个简单的web服务器
2021/01/03 Python
机械专业应届生求职信
2013/12/12 职场文书
经典演讲稿范文
2013/12/30 职场文书
本科毕业生自荐信
2014/06/02 职场文书
文秘自荐信
2014/06/28 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
企业员工辞职信范文
2015/05/12 职场文书
防震减灾主题班会
2015/08/14 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python