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中获取Radio元素值的方法
Jul 02 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
Node 自动化部署的方法
Oct 17 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
初窥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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
自己写的Javascript计算时间差函数
2013/10/28 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python自带的http模块详解
2016/11/06 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
动漫设计与制作专业推荐信
2014/07/07 职场文书
转变工作作风心得体会
2016/01/23 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis