Countdown is commonly used in Web development. The following lists some of my commonly used countdown tasks, which can be used normally after testing.
I
: The page countdown principle is generally implemented through the setTimeout or setinterval function. The following is the simplest countdown.
<SCRIPT type = "text/JavaScript">
VaR second = 10;
VaR timer;
Function Change ()
{
Second --;
If (second>-1)
{
Document. getelementbyid ("second"). innerhtml = second;
Timer = setTimeout ('change () ', 1000); // call its own implementation
}
Else
{
Cleartimeout (timer );
}
}
Timer = setTimeout ('change () ', 1000 );
</SCRIPT>
Ii. server time or local time displayed on the page (the current time is read every second and then displayed in the specified format)
<SCRIPT type = text/JavaScript>
VaR now = new date ();
Function curenttime (){
VaR Mm = now. getminutes ();
VaR Ss = now. gettime () %60000;
Ss = (SS-(SS % 1000)/1000;
VaR clock = now. gethours () + ':';
If (mm <10) Clock + = '0 ';
Clock + = mm + ':';
If (SS <10) Clock + = '0 ';
Return (clock + SS );
}
Function Showtime (){
Document. getelementbyid ("Clock "). innerhtml = now. getyear () + ". "+ (now. getmonth () + 1) + ". "+ now. getdate () + "" + curenttime (); now. setseconds (now. getseconds () + 1 );}
Window. onload = start;
Function start (){
Setinterval (Showtime, 1000 );
}
</SCRIPT>
Current Time: <body> <span id = "Clock"> </span> </body>
Iii. Countdown to data submitted by the player, or the server returns a remaining number of seconds. For example, it takes two hours for the player to upgrade a building,
The front-end starts timing from 2*3600 and saves the current data. The remaining number of seconds is read when the player refreshes the page the next time. The countdown below is rewritten from the game <Chinese story>,
There is a lot of countdown in This game. The function event_timer actually has two parameters, and he will time each building or unit with a unique ID.
<HTML>
<SCRIPT type = "text/JavaScript">
Function start_event_timer (){
Document. getelementbyid ('showtime'). style. Display = '';
Var val = Document. getelementbyid ('val _ text'). value;
Event_timer (VAL );
}
// Start timing
Function event_timer (time_remain ){
// The time submitted by the page and the server time generally range from 2 ~ 4-second difference
RT = parseint (time_remain) + 4; S
VaR eventid = Document. getelementbyid ('event _ time_remain ');
VaR senond_remain = Document. getelementbyid ('senond _ remain ');
If (RT = 0 ){
Alert ("timeover ");
Window. Location. Reload ();
} Else {
Eventid. innerhtml = time_format (RT );
Senond_remain.innerhtml = RT;
Time_remain = time_remain-1;
SetTimeout ("event_timer ('" + time_remain + "')", 1000 );
}
}
// Format the time in HH: mm: SS format. You can define the format as needed.
Function time_format (s ){
VaR T;
If (S>-1 ){
Hour = math. Floor (S/3600 );
Min = math. Floor (S/60) % 60;
SEC = S % 60;
Day = parseint (hour/24 );
If (day> 0 ){
Hour = hour-24 * day;
T = day + "day," + hour + ":";
}
Else t = hour + ":";
If (Min <10) {T + = "0 ";}
T + = min + ":";
If (SEC <10) {T + = "0 ";}
T + = sec ;}
Else
{T = "0: 00: 0x ";}
Return T;
}
</SCRIPT>
<Body>
<Center>
Number of seconds for the input time: <input type = "text" id = "val_text" size = "5"/>
<Input type = "button" onclick = "start_event_timer ();" value = "start"/>
<Div style = "display: none" id = "Showtime">
<P class = "event_class" style = "color: Blue;"> countdown: <span id = "event_time_remain"> </span>
& Nbsp; remaining <span id = "senond_remain"> </span> seconds
</Div>
</Center>
</Body>
</Html>
4. A countdown to refreshing on the Internet. The so-called "refreshing" means to save the remaining seconds to the browser object.
Window. Name, as long as the window is not closed, the value is in. I personally feel that there is no practical purpose. Refreshing is to re-read server data and update it in real time.
Not a static page...
<Script language = "JavaScript">
<! --
VaR maxtime;
Alert (window. Name );
If (window. Name = ''){
Maxtime = 60*60;
} Else {
Maxtime = Window. Name;
}
Function countdown (){
If (maxtime> = 0 ){
Minutes = math. Floor (maxtime/60 );
Seconds = math. Floor (maxtime % 60 );
MSG = "and" + minutes + "points" + seconds + "seconds ";
Document. All ["timer"]. innerhtml = MSG;
-- Maxtime;
Window. Name = maxtime;
}
Else {
Clearinterval (timer );
Alert ("time over ");
}
}
Timer = setinterval ("Countdown ()", 1000 );
// -->
</SCRIPT>
<Div id = "timer" style = "color: Red"> </div>
If the above functions or comments are incorrect, you are welcome to correct them or leave a message. Thank you ~