jquery實(shí)現(xiàn)心算練習(xí)代碼
更新時(shí)間：2010年12月06日 16:13:52 作者：
實(shí)現(xiàn)代碼的過(guò)程中，有兩個(gè)問(wèn)題很棘手，一個(gè)是開(kāi)始按鈕連續(xù)單擊，計(jì)時(shí)時(shí)間會(huì)迅速加快；二是如何判定玩家單擊哪個(gè)按鈕。
在線(xiàn)演示：
http://demo.jb51.net/js/jquery_xinsuan/index.htm
看看大家做完要多長(zhǎng)時(shí)間，代碼如下：
<!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>心算練習(xí)，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.jb51.net/jslib/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function () {
fnInitTable(2);
fnHideResult();
});
//顯示正確結(jié)果及分?jǐn)?shù)
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();
}
//生成尾數(shù)不為零的隨機(jī)數(shù)
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;
//開(kāi)始按鈕連續(xù)單擊會(huì)使得時(shí)間加快，vContinueClick可判斷是否連續(xù)單擊，多謝小龍女提示
var vContinueClick = 0;
function fnBegin() {
//分?jǐn)?shù)的顯示與否來(lái)確認(rèn)是否單擊結(jié)束按鈕
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() {
//小龍女短時(shí)間內(nèi)搞定，parseInt()的參數(shù)非常重要
var vSecond = parseInt($("#second").text(), 10);
var vMinute = parseInt($("#minute").text(), 10);
var vHour = parseInt($("#hour").text(), 10);
//處理秒數(shù)
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");
//處理小時(shí)
vHour++;
if (vHour >= 0 && vHour <= 9) {
$("#hour").text("0" + vHour);
}
else {
$("#hour").text(vHour);
}
}
}
}
</script>
</head>
<body>
<div>
<p>
<span>計(jì)時(shí)：</span> <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>
<br />
<input type="button" name="" value="開(kāi)始" onclick="fnBegin()" />
<input type="button" name="" value="暫停" onclick="fnPause()" />
<input type="button" name="" value="結(jié)束" 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 />
分?jǐn)?shù)：<span id="score"></span>
</p>
<table>
</table>
</div>
</body>
</html>
實(shí)現(xiàn)代碼的過(guò)程中，有兩個(gè)問(wèn)題很棘手，一個(gè)是開(kāi)始按鈕連續(xù)單擊，計(jì)時(shí)時(shí)間會(huì)迅速加快；二是如何判定玩家單擊哪個(gè)按鈕。問(wèn)題得到小龍女的解答，加個(gè)標(biāo)志位，好多問(wèn)題就迎刃而解的。最大的收獲就是代碼的組織，若想代碼量少，清晰的思路以及解決一個(gè)問(wèn)題的好方法很重要。先實(shí)現(xiàn)，后優(yōu)化，一種值得借鑒的方法！練習(xí)中還會(huì)有一些bug，希望大家多多指出！
http://demo.jb51.net/js/jquery_xinsuan/index.htm
看看大家做完要多長(zhǎng)時(shí)間，代碼如下：
復(fù)制代碼 代碼如下:
<!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>心算練習(xí)，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.jb51.net/jslib/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function () {
fnInitTable(2);
fnHideResult();
});
//顯示正確結(jié)果及分?jǐn)?shù)
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();
}
//生成尾數(shù)不為零的隨機(jī)數(shù)
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;
//開(kāi)始按鈕連續(xù)單擊會(huì)使得時(shí)間加快，vContinueClick可判斷是否連續(xù)單擊，多謝小龍女提示
var vContinueClick = 0;
function fnBegin() {
//分?jǐn)?shù)的顯示與否來(lái)確認(rèn)是否單擊結(jié)束按鈕
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() {
//小龍女短時(shí)間內(nèi)搞定，parseInt()的參數(shù)非常重要
var vSecond = parseInt($("#second").text(), 10);
var vMinute = parseInt($("#minute").text(), 10);
var vHour = parseInt($("#hour").text(), 10);
//處理秒數(shù)
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");
//處理小時(shí)
vHour++;
if (vHour >= 0 && vHour <= 9) {
$("#hour").text("0" + vHour);
}
else {
$("#hour").text(vHour);
}
}
}
}
</script>
</head>
<body>
<div>
<p>
<span>計(jì)時(shí)：</span> <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>
<br />
<input type="button" name="" value="開(kāi)始" onclick="fnBegin()" />
<input type="button" name="" value="暫停" onclick="fnPause()" />
<input type="button" name="" value="結(jié)束" 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 />
分?jǐn)?shù)：<span id="score"></span>
</p>
<table>
</table>
</div>
</body>
</html>
實(shí)現(xiàn)代碼的過(guò)程中，有兩個(gè)問(wèn)題很棘手，一個(gè)是開(kāi)始按鈕連續(xù)單擊，計(jì)時(shí)時(shí)間會(huì)迅速加快；二是如何判定玩家單擊哪個(gè)按鈕。問(wèn)題得到小龍女的解答，加個(gè)標(biāo)志位，好多問(wèn)題就迎刃而解的。最大的收獲就是代碼的組織，若想代碼量少，清晰的思路以及解決一個(gè)問(wèn)題的好方法很重要。先實(shí)現(xiàn)，后優(yōu)化，一種值得借鑒的方法！練習(xí)中還會(huì)有一些bug，希望大家多多指出！
相關(guān)文章
js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例
這篇文章主要介紹了js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁(yè)面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了jQuery中DOM 屬性使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
循環(huán)滾動(dòng)展示的文字和圖片每個(gè)人都見(jiàn)過(guò)，實(shí)現(xiàn)類(lèi)似效果的 JS 也很多。但如果只用于幾個(gè)條目或三五張圖片，體積龐大的 JS 會(huì)浪費(fèi)資源2012-05-05
animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】
下面小編就為大家?guī)?lái)一篇animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
基于jquery的設(shè)置頁(yè)面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫(xiě)過(guò)的方法有缺陷，可以輸入空格?，F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過(guò)濾空格的功能。2011-04-04
jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
這篇文章主要介紹了jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器，商城一類(lèi)都可以使用2017-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery異步提交表單的兩種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了使用jQuery制作基礎(chǔ)的Web圖片輪播效果的實(shí)例,鼠標(biāo)懸停時(shí)可停止而離開(kāi)時(shí)可自動(dòng)輪播,文中還介紹了一種使用zslider插件來(lái)實(shí)現(xiàn)的方法,比較犀利,需要的朋友可以參考下2016-04-04