JavaScript Countdown Common Code Encyclopedia

Last Update:2017-01-13 Source: Internet

Author: User

Tags diff setinterval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Countdown to the end of the world

The code is as follows

Copy Code

<form name= "Form1" >
<div align= "center" align= "Center" >
<center> from 2012 <span class= ' wp_keywordlink_affiliate ' ><a href= ' tag/%e4%b8%96%e7%95%8c%e6%9c%ab%e6% 97%a5 "title=" View all articles in the end of the world "target= _blank" > Doomsday </a></span> and:<br>
<input type= "textarea" name= "left" size= "style=" >
</center>
</div>
</form>
<script language= "JavaScript" >
Startclock ()
var timerid = null;
var timerrunning = false;
function Showtime () {
Today = new Date ();
var nowhour = today.gethours ();
var nowminute = Today.getminutes ();
var nowmonth = Today.getmonth ();
var nowdate = Today.getdate ();
var nowyear = Today.getyear ();
var nowsecond = Today.getseconds ();
if (Nowyear < 2000)
nowyear = 1900 + nowyear;
today = NULL;
Hourleft = 00-nowhour
Minuteleft = 00-nowminute
Secondleft = 00-nowsecond
Yearleft = 2012-nowyear
Monthleft = 12-nowmonth-1
Dateleft = 21-nowdate
if (Secondleft < 0) {
Secondleft = + Secondleft;
Minuteleft = Minuteleft-1;
}
if (Minuteleft < 0) {
Minuteleft = + Minuteleft;
Hourleft = Hourleft-1;
}
if (Hourleft < 0) {
Hourleft = + Hourleft;
Dateleft = Dateleft-1;
}
if (Dateleft < 0) {
Dateleft = + Dateleft;
Monthleft = Monthleft-1;
}
if (Monthleft < 0) {
Monthleft = + Monthleft;
Yearleft = Yearleft-1;
}
Temp = Yearleft + ' year, ' + Monthleft + ' month, ' + Dateleft + ' Day, ' + Hourleft + ' hour, ' + minuteleft + ' min, ' + secondleft + ' sec '
Document.form1.left.value = Temp;
Timerid = settimeout ("Showtime ()", 1000);
Timerrunning = true;
}
var timerid = null;
var timerrunning = false;
function Stopclock () {
if (timerrunning)
Cleartimeout (Timerid);
Timerrunning = false;
}
function Startclock () {
Stopclock ();
Showtime ();
}
-->
</script>

2. Hour countdown, can be used for online exams

The code is as follows

Copy Code

3. Simple countdown (show only days)

The code is as follows

Copy Code

4. Complex version countdown, with milliseconds

The code is as follows

Copy Code

From XXX Opening Ceremony and
<script language= "JavaScript" type= "Text/javascript" >d<span class= ' wp_keywordlink_affiliate ' ><a href= "Tag/js" title= "View all articles in JS" target= "_blank" >js</a></span> () </script>]

Fifth: JavaScript countdown-using system time self-verification
The use of system time self-test countdown, without manual adjustment so that the countdown is more accurate, code and detailed comments as follows:

The code is as follows

Copy Code

<span id= "Clock" >00:01:11:00</SPAN>
<input id= "STARTB" type= "button" value= "Start countdown!" Onclick= "Run ()"
<input id= "endb" type= "button" value= "Stop countdown!" onclick= "Stop ()"
<br>
<input id= "diff" type= "text"
<input id= "Next" type= "text"
<script language= "Javascript"
       var normalelapse = $;
    var nextelapse = Normalelapse;
    var counter;
    var starttime;
    var start = Clock.innertext;
    var finish = "00:00:00:00";
    var timer = null;

Start running
function Run () {
Startb.disabled = true;
endb.disabled = false;
Counter = 0;
Initialization start time
StartTime = new Date (). valueof ();

Nextelapse is timed to be 100 milliseconds at initial time
Note the SetInterval function: After the time elapses nextelapse (milliseconds), OnTimer begins execution
Timer = Window.setinterval ("OnTimer ()", nextelapse);
}

Stop running
function Stop () {
startb.disabled = false;
Endb.disabled = true;
Window.cleartimeout (timer);
}

Window.onload = function () {
Endb.disabled = true;
}

Countdown function
function OnTimer () {

if (start = finish) {
Window.clearinterval (timer);
Alert ("Time is up!");
Return
}

        var HMS = new String (start). Split (":");
        var ms = new Number (hms[3]);
        var s = new number (hms[2]);
        var m = new number (hms[1]);
        var h = new number (hms[0]);

        ms-= 10;
        if (MS < 0) {
             ms = 90;
            S-= 1;
            if (s < 0) {
    & nbsp;           s = 59;
                M-= 1;
           }

if (M < 0) {
m = 59;
H-= 1;
}
}

var ms = MS < 10? ("0" + ms): MS;
var ss = S < 10? ("0" + s): s;
var sm = m < 10? ("0" + m): M;
var sh = h < 10? ("0" + H): h;

Start = sh + ":" + SM + ":" + SS + ":" + ms;
Clock.innertext = start;

Clear the last Timer
Window.clearinterval (timer);

The time difference of the self-checking system is obtained, and the time of the next new timer is Nextelapse
counter++;
var countersecs = counter * 100;
var elapsesecs = new Date (). valueof ()-starttime;
var diffsecs = countersecs-elapsesecs;
Nextelapse = Normalelapse + diffsecs;
Diff.value = Countersecs + "-" + elapsesecs + "=" + diffsecs;
Next.value = "Nextelapse =" + nextelapse;
if (Nextelapse < 0) Nextelapse = 0;

//Start a new timer
        timer = Window.setinterval ("OnTimer ()", Nextelapse);
   }
</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More