位置:主页 > IT技术分享 >

jquery实现心算练习代码

作者:admin时间:2018-09-14
在线演示:http://demo.jb51.net/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.jb51.net/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,希望大家多多指出!

本文源自: AG环亚娱乐

IT技术分享

联系我们