English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home page
  3. Experience notes
  4. Content

Comprehensive JavaScript Countdown Timer Code

This article shares the specific code for JS countdown display for your reference, as follows

Type 1:Precise to seconds JavaScript countdown code　　

HTML code:　　

<form name="form1"> 
<div align="center" align="center"> 
The time remaining to2010Years remaining:<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 = 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 = 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-1month = month 
} 
if (Minuteleft<0) 
{ 
Minuteleft=60+Minuteleft; 
Hourleft=Hourleft-1month = month 
} 
if (Hourleft<0) 
{ 
Hourleft=24+Hourleft; 
Dateleft=Dateleft-1month = month 
} 
if (Dateleft<0) 
{ 
Dateleft=31+Dateleft; 
Monthleft=Monthleft-1month = month 
} 
if (Monthleft<0) 
{ 
Monthleft=12+Monthleft; 
Yearleft=Yearleft-1month = month 
} 
Temp=Yearleft+years,+Monthleft+months,+Dateleft+days,+Hourleft+hours,+Minuteleft+minutes,+Secondleft+seconds 
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>

Second type:Some Sports Meet　　

HTML code:　　 

<!--Countdown JavaScript begins--> 
<script language="JavaScript"> 
<!-- 
function DigitalTime1() 
{ 
var deadline= new Date("08/13/2007") //Opening countdown 
var symbol="8Month13day" 
var now = new Date() 
var diff = -480 - now.getTimezoneOffset() //is the time difference between Beijing time and local time 
var leave = (deadline.getTime() - now.getTime()) + diff*60000 
var day = Math.floor(leave / (1000 * 60 * 60 * 24)) 
var hour = Math.floor(leave / (1000*3600)) - (day * 24) 
var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60) 
var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) 
var deadline_2= new Date("08/13/2004") //Countdown after opening 
var symbol_2="8Month13day" 
var now_2 = new Date() 
var diff_2 = -480 - now.getTimezoneOffset() //is the time difference between Beijing time and local time 
var leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000 
var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24)) 
var hour_2 = Math.floor(leave_2 / (1000*3600)) - (day_2 * 24) 
var minute_2 = Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60) 
var second_2 = Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60) 
day=day+1month = month 
day_2=day_2+1month = month 
if (day>0) //The opening ceremony has not started 
{ 
//LiveClock1.innerHTML = "Now"+symbol+"days" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0) //The opening ceremony has started 
{ 
//LiveClock1.innerHTML = "Now it's"+symbol+"remaining"+day+"days"+hour+"hours"+minute+"minutes"+second +"seconds" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day==0) //Opening ceremony is ongoing 
{ 
//LiveClock1.innerHTML = "Now"+symbol+"days" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0 & day_2>19) //Some sports meeting will end 
{ 
//LiveClock1.innerHTML = "Now it's"+symbol+"remaining"+day+"days"+hour+"hours"+minute+"minutes"+second +"seconds" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
} 
// --> 
</script> 
<!--Countdown JavaScript end--> 
<body onload=DigitalTime1()> 
<div id= LiveClock1></div> 
</body>

The third type:Hour countdown　　

HTML code:　　 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var maxtime = 60*60 //One hour, calculated in seconds, self-adjustable! 
function CountDown(){ 
if(maxtime>=0){ 
minutes = Math.floor(maxtime/60); 
seconds = Math.floor(maxtime%60); 
msg = "Time remaining to end"+minutes+"minutes"+seconds+"seconds"; 
document.all["timer"].innerHTML=msg; 
if(maxtime == 5*60) alert('Attention, there are still5minutes!'); 
--maxtime; 
} 
else{ 
clearInterval(timer); 
alert("Time's up, end!"); 
} 
} 
timer = setInterval("CountDown()",1000); 
//--> 
</SCRIPT> 
<div id="timer" style="color:red"></div>

The fourth type:Simplified Chinese countdown　　

HTML code:　　 

<Script Language="JavaScript"> 
<!-- Begin 
　　var timedate= new Date("January 14,2006); 
　　var times="Postgraduate Entrance Examination"; 
　　var now = new Date(); 
　　var date = timedate.getTime() - now.getTime(); 
　　var time = Math.floor(date / (1000 * 60 * 60 * 24)) { 
　　if (time >= 0) ; 
document.write("<li><font color=#DEDBDE>Now it is2006years"+times+"There are: <font color=#ffffff><b>"+time +"</b></font> days</font></li>"); 
// End --> 
</Script>

The fifth type:Simplified countdown two　　

HTML code:　　 

<script language="JavaScript" type="text/javascript"> 
function djs(){ 
var urodz= new Date("11/12/2008);　 
var now = new Date(); 
var num 
var ile = urodz.getTime() - now.getTime();　　 
var dni = Math.floor(ile / (1000 * 60 * 60 * 24)) {　　 
if (dni >1)　　 
num=dni+1 
else if (dni = 1) num=2　 
else if (dni == 0) num=1 
else num=0　 
document.write(num)　　 
} 
</script>

There are [/javascript">djs()</script>] days　　

The sixth type:Javascript countdown timer - System time self-validation is adopted　　
This countdown utilizes the system time for self-validation, eliminating the need for manual adjustment to ensure greater accuracy. The code and detailed comments are as follows:　　

<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"> 
/* This notice must be untouched at all times.
countdown.js v. 1.0 
The latest version is available at 
http://blog.csdn.net/yjgx007
Copyright (c) 2004 Xinyi.Chen. All rights reserved. 
Created 7/30/2004 by Xinyi.Chen. 
Web: http://blog.csdn.net/yjgx007 
E-Mail: [email protected] 
Last modified: 7/30/2004
This program is free software; 
you can redistribute it and/or modify it under the terms of the 
GNU General Public License as published by the Free Software Foundation;
See the GNU General Public License 
at http://www.gnu.org/copyleft/gpl.html for more details. 
*/ 
var normalelapse = 100; 
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; 
// Initialize the start time 
startTime = new Date().valueOf(); 
// nextelapse is the timing interval, initially set to100 milliseconds 
// Note the setInterval function: onTimer starts executing after the time elapses (in milliseconds) 
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 -= 10month = month 
if (ms < 0) 
{ 
ms = 90; 
s -= 1month = month 
if (s < 0) 
{ 
 s = 59month = month 
 m -= 1month = month 
} 
if (m < 0) 
{ 
 m = 59month = month 
 h -= 1month = month 
} 
} 
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 previous timer 
window.clearInterval(timer); 
// Self-check the system time to get the time difference, and get the time for the next timer to be started, nextelapse, accordingly 
counter++month = month 
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>

Attach a complete countdown and time Copy and use The running results are:　

Day Hour Minute Second 2013Year01Month22Day 15:44:23 Tuesday

<html>
<head>
<title>Countdown Test</title>
 <script src="http://event.wushuangol.com/ShopClothes/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="JavaScript">
 $("document").ready(function () {
<!-- The timer must be started -->
 clockon();
 });
function clockon() {
 var now = new Date();
 var year = now.getFullYear(); //getFullYear getYear
 var year = now.getFullYear();
 var month = now.getMonth();
 var date = now.getDate();
 var day = now.getDay();
 var hour = now.getHours();
 var minu = now.getMinutes();
 var sec = now.getSeconds();
 var week; + 1month = month
 ; 10) month = "0" + month;
 if (date < 10) date = "0" + date;
 if (hour < 10) hour = "0" + hour;
 if (minu < 10) minu = "0" + minu;
 if (sec < 10) sec = "0" + sec;
 var arr_week = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
 week = arr_week[day];
 var time = "";
 time = year + "Year" + month + "Month" + date + "Day" + " " + hour + : + minu + : + sec + " " + week;
 $("#bgclock").html(time);
 var timer = setTimeout("clockon()", 200);
}
<!-- Hidden script from old browsers
var DifferHour = -1
var DifferMinute = -1
var DifferSecond = -1
var Tday1 = new Date("Feb 11, 2013 00:00:00" //**Countdown time-Note the format
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
function clock()
{
 var time = new Date()
 var hour = time.getHours()
 var minute = time.getMinutes()
 var second = time.getSeconds()
 var timevalue = ""+((hour > 12) ? hour-12:hour)
 timevalue +((minute < 10) ? ":0":":")+minute
 timevalue +((second < 10) ? ":0":":")+second
 timevalue +((hour >12 ) ? " PM":" AM")
 var convertHour = DifferHour
 var convertMinute = DifferMinute
 var convertSecond = DifferSecond
 var Diffms = Tday1.getTime() - time.getTime()
 DifferHour = Math.floor(Diffms / daysms)
 Diffms -= DifferHour * daysms
 DifferMinute = Math.floor(Diffms / hoursms)
 Diffms -= DifferMinute * hoursms
 DifferSecond = Math.floor(Diffms / Secondms)
 Diffms -= DifferSecond * Secondms
 var dSecs = Math.floor(Diffms / microsecond)
 if(convertHour != DifferHour) document.formnow.dd.value=DifferHour
 if(convertMinute != DifferMinute) document.formnow.hh.value=DifferMinute
 if(convertSecond != DifferSecond) document.formnow.mm.value=DifferSecond
 document.formnow.ss.value=dSecs
 document.formnow.ss.value=dSecs
// document.formnow.Tnow.value= DifferHour DifferMinute + DifferSecond + dSecs
setTimeout("clock()",1000)
}
//
Hidden-->
</script>
</head>
<body onload="clock();return true" >
<!--Display content-->
<form name="formnow">
<input name="dd" type="text" style="border:0;" size=2>
days
<input name="hh" type="text" style="border:0;" size=2>
hours
<input name="mm" type="text" style="border:0;" size=2>
minutes
<input name="ss" type="text" style="border:0;" size=2>
seconds
<span id="bgclock" style="float:right;padding-right:10px; padding-top:2px;text="red""></span>
</form>
<!--Countdown finished-->
</body>
</html>

That's all for this article, I hope it helps everyone's learning, and I also hope everyone will support the Yelling Tutorial more.<

Basic Tutorial
You May Also Like