jquery实现心算练习代码

在线演示：
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，希望大家多多指出！

赞 (0)

相关推荐

  • jquery实现心算练习代码

    在线演示: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

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jQuery自定义数值抽奖活动代码

    本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja

  • jQuery遍历Form示例代码

    jQuery 遍历 Form,代码如下 复制代码 代码如下: <script type="text/javascript"> // 取得 id 为form1 的 form 的所有输入变量 values = $("#form1").serializeArray(); var values, index; for (index = 0; index < values.length; ++index) { if (values[index].name =

  • jquery css 选择器演示代码

    jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • 全面解析DOM操作和jQuery实现选项移动操作代码分享

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一:  .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间

  • jQuery 页面 Mask实现代码

    在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask.因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用. 复制代码 代码如下: (function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.8, z: 10000, bgcolor: '#000' }, options); // 创建一个 Mask 层,追加

  • jQuery+HTML5加入购物车代码分享

    jQuery+HTML5加入购物车代码分享

    这是一款基于jquery+html5实现的支持累加计价的网站购物车代码,可以把货物添加到购物车,添加物品数量,如果想取消购置某物品,这个功能也是可以实现的. 运行效果图:-----------------------------------查看效果----------------------------------- 为大家分享的jQuery+HTML5加入购物车代码如下 <head lang="en"> <meta charset="UTF-8"

  • jquery实现放大镜简洁代码(推荐)

    jquery实现放大镜简洁代码(推荐)

    简介 网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> * { margin: 0; paddi

随机推荐