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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
js数据类型检测总结
Aug 05 Javascript
JS实现的雪花飘落特效示例
Dec 03 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 获取客户端的真实ip
2009/11/30 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP简洁函数小结
2011/08/12 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
常用的javascript function代码
2008/05/23 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
python实现顺时针打印矩阵
2019/03/02 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
业务员自荐信范文
2014/04/20 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
全新239军机修复记
2022/04/05 无线电