SoFunction
Updated on 2025-04-06

Summary of JS commonly used countdown code examples

This example summarizes the commonly used countdown code for JS. Share it for your reference, as follows:

The first type: JavaScript countdown code that is accurate to seconds

<form name="form1">
<div align="center" align="center">
<center>Leave2010There is still a year:<br>
<input type="textarea" name="left" size="35" style="text-align: center">
</center>
</div>
</form>
<script LANGUAGE="javascript">
startclock()
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var NowHour = ();
var NowMinute = ();
var NowMonth = ();
var NowDate = ();
var NowYear = ();
var NowSecond = ();
if (NowYear <2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'Year, '+Monthleft+'moon, '+Dateleft+'sky, '+Hourleft+'Hour, '+Minuteleft+'point, '+Secondleft+'Second'
document.=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>

The second type: a certain sports meeting

<!--CountdownJavascript begin-->
<script language="JavaScript">
<!--
function DigitalTime1()
{
var deadline= new Date("08/13/2007") //Opening countdownvar symbol="August 13"
var now = new Date()
var diff = -480 - () //It is the time difference between Beijing time and local timevar leave = (() - ()) + diff*60000
var day = (leave / (1000 * 60 * 60 * 24))
var hour = (leave / (1000*3600)) - (day * 24)
var minute = (leave / (1000*60)) - (day * 24 *60) - (hour * 60)
var second = (leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60)
var deadline_2= new Date("08/13/2004") //After opening timevar symbol_2="August 13"
var now_2 = new Date()
var diff_2 = -480 - () //It is the time difference between Beijing time and local timevar leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000
var day_2 = (leave_2 / (1000 * 60 * 60 * 24))
var hour_2 = (leave_2 / (1000*3600)) - (day_2 * 24)
var minute_2 = (leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60)
var second_2 = (leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60)
day=day+1;
day_2=day_2+1;
if (day>0) //Not opened yet{
// = "Now"+symbol+"day" = "<font
setTimeout("DigitalTime1()",1000)
}
if (day<0) //It has been opened{
// = "Now there are still "+day+"day+"day+"hour+"hour+"minute+"minute+"second+"second" = "<font
setTimeout("DigitalTime1()",1000)
}
if (day==0) //Opening{
// = "Now"+symbol+"day" = "<font
setTimeout("DigitalTime1()",1000)
}
if (day<0 & day_2>19) //The sports meeting ends{
// = "Now there are still "+day+"day+"day+"hour+"hour+"minute+"minute+"second+"second" = "<font
setTimeout("DigitalTime1()",1000)
}
}
// -->
</script>
<!--CountdownJavascript end-->
<body onload=DigitalTime1()>
<div id= LiveClock1></div>
</body>

The third type: hour countdown

<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime = 60*60 //One hour, calculate in seconds, adjust it yourself!function CountDown(){
if(maxtime>=0){
minutes = (maxtime/60);
seconds = (maxtime%60);
msg = "There is still a distance to end"+minutes+"point"+seconds+"Second";
["timer"].innerHTML=msg;
if(maxtime == 5*60) alert('Note, there are 5 minutes left!');
--maxtime;
}
else{
clearInterval(timer);
alert("Time is over!");
}
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div  style="color:red"></div>

The fourth type: the simplest countdown

<Script Language="JavaScript">
<!-- Begin
var timedate= new Date("January 14,2006");
var times="Lesson exam";
var now = new Date();
var date = () - ();
var time = (date / (1000 * 60 * 60 * 24));
if (time >= 0) ;
("&lt;li&gt;&lt;font color=#DEDBDE>Now there is "+times+" in 2006: <font color=#ffffff><b>"+time +"</b></font> days</font></li>");// End --&gt;
&lt;/Script&gt;

The fifth type: the simplest countdown two

&lt;script language="JavaScript" type="text/javascript"&gt;
function djs(){
var urodz= new Date("11/12/2008");
var now = new Date();
var num
var ile = () - ();
var dni = (ile / (1000 * 60 * 60 * 24));
if (dni &gt;1)
num=dni+1
else if (dni == 1)num=2
else if (dni == 0)num=1
else num=0
(num)
}
&lt;/script&gt;
There is still a certain opening ceremony [&lt;script language="JavaScript" type="text/javascript"&gt;djs()&lt;/script&gt;] sky

The fifth: Javascript countdown timer - self-checking of system time

This time, the countdown is checked by self-checking of the system time, and there is no need for manual adjustment to make the countdown more accurate. The code and detailed comments are as follows:

&lt;span &gt;00:01:11:00&lt;/span&gt;
&lt;input  type="button" value="start countdown!" onclick="run()"&gt;
&lt;input  type="button" value="stop countdown!" onclick="stop()"&gt;
&lt;br&gt;
&lt;input  type="text"&gt;
&lt;input  type="text"&gt;
&lt;script language="Javascript"&gt;
var normalelapse = 100;
var nextelapse = normalelapse;
var counter;
var startTime;
var start = ;
var finish = "00:00:00:00";
var timer = null;
// Start runningfunction run() {
 = true;
 = false;
counter = 0;
// Initialization start timestartTime = new Date().valueOf();
// nextelapse is the timing time, initially 100 milliseconds// Note the setInterval function: Nextelapse (milliseconds) is passed, onTimer starts executingtimer = ("onTimer()", nextelapse);
}
// Stop runningfunction stop() {
 = false;
 = true;
(timer);
}
 = function() {
 = true;
}
// Countdown functionfunction onTimer()
{
if (start == finish)
{
(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 &lt; 0)
{
ms = 90;
s -= 1;
if (s &lt; 0)
{
  s = 59;
  m -= 1;
}
if (m &lt; 0)
{
  m = 59;
  h -= 1;
}
}
var ms = ms &lt; 10 ? ("0" + ms) : ms;
var ss = s &lt; 10 ? ("0" + s) : s;
var sm = m &lt; 10 ? ("0" + m) : m;
var sh = h &lt; 10 ? ("0" + h) : h;
start = sh + ":" + sm + ":" + ss + ":" + ms;
 = start;
// Clear the last timer(timer);
// The time difference of self-checking system time is obtained, and thus the time of the new timer that is started next time is obtained nextlapsecounter++;
var counterSecs = counter * 100;
var elapseSecs = new Date().valueOf() - startTime;
var diffSecs = counterSecs - elapseSecs;
nextelapse = normalelapse + diffSecs;
 = counterSecs + "-" + elapseSecs + "=" + diffSecs;
 = "nextelapse = " + nextelapse;
if (nextelapse &lt; 0) nextelapse = 0;
// Start a new timertimer = ("onTimer()", nextelapse);
}
&lt;/script&gt;

PS: Here are a few time and timer-related tools for your reference:

Online stopwatch tool:
http://tools./bianmin/miaobiao

Unix timestamp conversion tool:
http://tools./code/unixtime

Online time inquiry around the world:
http://tools./zhuanhuanqi/worldtime

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript time and date operation skills》《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript mathematical operations usage

I hope this article will be helpful to everyone's JavaScript programming.