Common page countdown

Source: Internet
Author: User


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 ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.