<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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.jb51.net/jslib/jquery/jquery-1.4.4.js" ></script>
<script type= "Text/javascript" >
$ (function () {
Fninittable (2);
Fnhideresult ();
});
Show 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 a random number with a mantissa that is not zero
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 < 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>x</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;
Start button Continuous Click will make time faster, Vcontinueclick can determine whether continuous click, Dochey female Tips
var vcontinueclick = 0;
function Fnbegin () {
Whether the score is displayed or not to confirm that the end button is clicked
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 () {
Little Dragon Girl is done in a short time, parseint () parameter is very important
var Vsecond = parseint ($ ("#second"). Text (), 10);
var Vminute = parseint ($ ("#minute"). Text (), 10);
var vhour = parseint ($ ("#hour"). Text (), 10);
Number of seconds processed
vsecond++;
if (vsecond >= 0 && Vsecond < 10) {
$ ("#second"). Text ("0" + vsecond);
else if (vsecond >= && vsecond <= 60) {
$ ("#second"). Text (Vsecond);
} else {
$ ("#second"). Text ("00");
More than 60 seconds, you need to process minutes
vminute++;
if (vminute >= 0 && vminute <= 9) {
$ ("#minute"). Text ("0" + vminute);
else if (vminute >= && 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>
<body>
<div>
<p>
<span> timing:</span> <span id= "Hour" >00</span>:<span id= "Minute" >00</span>:< Span id= "Second" >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 2x2" onclick= "fninittable (2)"/>
<input type= "button" name= "value=" generates 2x3 "onclick=" fninittable (3) "/>"
<br/>
Score: <span id= "Score" ></span>
</p>
<table>
</table>
</div>
</body>
In the process of implementing the code, there are two difficult problems, one is the Start button continuous click, time will quickly accelerate, and the second is how to determine the player click which button. The problem is little Dragon Woman's answer, add a sign bit, many problems will be solved. The biggest harvest is the organization of the Code, and if you want less code, clear ideas and a good way to solve a problem is important. First realize, after the optimization, a way to learn from it! There will be some bugs in the exercise, I hope you can point out!
