jquery实现心算练习代码_jquery

在线演示：
看看大家做完要多长时间，代码如下：

代码如下:

<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.4.4.js?1.1.9">《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("");
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("" + vPreValue + "×" + vNextValue + "=" + "" + "" + vResultt + "" + "");
}
$("table").append("");
}
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》

计时： 00:00:00











分数：

实现代码的过程中，有两个问题很棘手，一个是开始按钮连续单击，计时时间会迅速加快；二是如何判定玩家单击哪个按钮。问题得到小龙女的解答，加个标志位，好多问题就迎刃而解的。最大的收获就是代码的组织，若想代码量少，清晰的思路以及解决一个问题的好方法很重要。先实现，后优化，一种值得借鉴的方法！练习中还会有一些bug，希望大家多多指出！