<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///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>Mental arithmetic exercises, 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./jslib/jquery/jquery-1.4."></script>
<script type="text/javascript">
$(function () {
fnInitTable(2);
fnHideResult();
});
//Show the correct results and scores
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();
}
//Generate random numbers with non-zero mantissa
function fnRandomBy(parUnder, parOver) {
var vResult = 0;
while (vResult % 10 == 0) {
switch () {
case 1:
vResult = parseInt(() * parUnder + 1);
break;
case 2:
vResult = parseInt(() * (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;
//Continuous clicking of the start button will speed up the time. vContinueClick can determine whether to click continuously. Thank you Xiaolongnu's tip
var vContinueClick = 0;
function fnBegin() {
//Can confirm whether the end button is clicked or not if the score is displayed or not.
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() {
//Xiaolongnu will do it in a short time, the parameters of parseInt() are very important
var vSecond = parseInt($("#second").text(), 10);
var vMinute = parseInt($("#minute").text(), 10);
var vHour = parseInt($("#hour").text(), 10);
// Processing seconds
vSecond++;
if (vSecond >= 0 && vSecond < 10) {
$("#second").text("0" + vSecond);
} else if (vSecond >= 10 && vSecond <= 60) {
$("#second").text(vSecond);
} else {
$("#second").text("00");
//If it is greater than 60 seconds, it will take minutes to process
vMinute++;
if (vMinute >= 0 && vMinute <= 9) {
$("#minute").text("0" + vMinute);
} else if (vMinute >= 10 && vMinute <= 60) {
$("#minute").text(vMinute);
} else {
$("#minute").text("00");
// Processing hours
vHour++;
if (vHour >= 0 && vHour <= 9) {
$("#hour").text("0" + vHour);
}
else {
$("#hour").text(vHour);
}
}
}
}
</script>
</head>
<body>
<div>
<p>
<span>Timer:</span> <span >00</span>:<span >00</span>:<span >00</span>:<span >00</span>
<br />
<input type="button" name="" value="start" onclick="fnBegin()" />
<input type="button" name="" value="pause" onclick="fnPause()" />
<input type="button" name="" value="end" onclick="fnStop()" />
<br />
<input type="button" name="pre" value="generate 2 × 2" onclick="fnInitTable(2)" />
<input type="button" name="" value="generate 2 × 3" onclick="fnInitTable(3)" />
<br />
Score: <span >/span>
</p>
<table>
</table>
</div>
</body>
</html>