jquery实现心算练习代码

200 阅读 0 评论 132 点赞

我是靠谱客的博主简单荔枝，最近开发中收集的这篇文章主要介绍jquery实现心算练习代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在线演示：
http://demo.uoften.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.uoften.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，希望大家多多指出！