This article illustrates the JavaScript countdown timer implementation method. Share to everyone for your reference. The specific analysis is as follows:
I. BASIC OBJECTIVES
Design a countdown timer in JavaScript, once the time is complete so that the button is not clickable state
The effect of the following figure, in order to illustrate the problem, adjusted to every 50 milliseconds is every 0.05 jump table,
When really used, put window.onload=function () {...} SetInterval ("Clock.move ()", 50), from 50 to 1000.
The button can still be clicked before the time is run out.
After the time is used up, the button cannot be clicked.
Second, the production process
Copy Code code as follows:
<! 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=utf-8 "/>
<title>time remaining</title>
<!--HTML section is simple, inline text and submit buttons that require JavaScript control are id-->
<body>
Time Remaining: <span id= "Timer" ></span>
<input id= "Go" type= "submit" value= "Go"/>
</body>
<script>
/* The function to be used by the main function, declare * *
var clock=new clock ();
/* Pointer to Timer/*
var timer;
Window.onload=function () {
/* Main function in every 50 seconds call the Move method in the 1 clock function can be * *
Timer=setinterval ("Clock.move ()", 50);
}
function Clock () {
/*s is a variable in clock (), not a global variable of Var, representing the number of seconds left.
this.s=140;
This.move=function () {
/* The Exchange function is called for seconds to minutes before the output, because Exchange is not used in the main function window.onload, so no declaration is required.
document.getElementById ("Timer"). Innerhtml=exchange (THIS.S);
/* Every time you call, the number of seconds left on the self-reduction * *
this.s=this.s-1;
* * If time runs out, then, the window, so that the button is not available, stop calling the clock function in the move () * *
if (this.s<0) {
Alert ("Time to");
document.getElementById ("Go"). Disabled=true;
Cleartimeout (timer);
}
}
}
function Exchange (time) {
/*javascript Division is a floating-point division, and you must use Math.floor to take its integer part.
This.m=math.floor (TIME/60);
/* There is a residual operation * *
This.s= (TIME%60);
this.text=this.m+ "Minutes" +this.s+ "seconds";
/* Pass the form parameter time do not use this, and the rest of the variables used in this function must use the this*/
return this.text;
}
</script>
I hope this article will help you with your JavaScript programming.
