Summary of Examples of Common Countdown Codes in JS
- 2021-07-18 06:32:47
- OfStack
This paper summarizes the common countdown codes of JS with examples. Share it for your reference, as follows:
Type 1: javascript countdown code accurate to seconds
<form name="form1">
<div align="center" align="center">
<center> Away from 2010 There are still years :<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-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+' Month , '+Dateleft+' Days , '+Hourleft+' Hours , '+Minuteleft+' Points , '+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>
Type 2: So-and-so sports meeting
<!-- Countdown Javascript begin-->
<script language="JavaScript">
<!--
function DigitalTime1()
{
var deadline= new Date("08/13/2007") // Opening countdown
var symbol="8 Month 13 Day "
var now = new Date()
var diff = -480 - now.getTimezoneOffset() // It 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") // Timing after opening
var symbol_2="8 Month 13 Day "
var now_2 = new Date()
var diff_2 = -480 - now.getTimezoneOffset() // It 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+1;
day_2=day_2+1;
if (day>0) // It has not yet opened
{
//LiveClock1.innerHTML = " Now "+symbol+" Days "
LiveClock1.innerHTML = "<font
setTimeout("DigitalTime1()",1000)
}
if (day<0) // Has opened
{
//LiveClock1.innerHTML = " Away now "+symbol+" And "+day+" Days "+hour+" Hours "+minute+" Points "+second +" Seconds "
LiveClock1.innerHTML = "<font
setTimeout("DigitalTime1()",1000)
}
if (day==0) // Is opening
{
//LiveClock1.innerHTML = " Now "+symbol+" Days "
LiveClock1.innerHTML = "<font
setTimeout("DigitalTime1()",1000)
}
if (day<0 & day_2>19) // So-and-so sports meeting is over
{
//LiveClock1.innerHTML = " Away now "+symbol+" And "+day+" Days "+hour+" Hours "+minute+" Points "+second +" Seconds "
LiveClock1.innerHTML = "<font
setTimeout("DigitalTime1()",1000)
}
}
// -->
</script>
<!-- Countdown Javascript end-->
<body onload=DigitalTime1()>
<div id= LiveClock1></div>
</body>
Type 3: Hour countdown
<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime = 60*60 //1 Hours, calculated in seconds, adjusted by yourself !
function CountDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = " There is still a distance from the end "+minutes+" Points "+seconds+" Seconds ";
document.all["timer"].innerHTML=msg;
if(maxtime == 5*60) alert(' Note that there are also 5 Minutes !');
--maxtime;
}
else{
clearInterval(timer);
alert(" It's time, it's over !");
}
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer" style="color:red"></div>
Type 4: The simplest countdown
<Script Language="JavaScript">
<!-- Begin
var timedate= new Date("January 14,2006");
var times=" Postgraduate 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> Away now 2006 Year "+times+" And : <font color=#ffffff><b>"+time +"</b></font> Days </font></li>");
// End -->
</Script>
Type 5: Minimum Countdown 2
<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 is still a certain opening ceremony [<script language="JavaScript" type="text/javascript">djs()</script>] Days
Number 5: Javascript countdown timer-using system time self-checking
This time, the system time is used to self-check the countdown, so that the countdown is more accurate without manual adjustment. 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">
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;
// Initialization start time
startTime = new Date().valueOf();
// nextelapse It's a timed time , Initially 100 Milliseconds
// Attention setInterval Function : Time goes by nextelapse( Milliseconds ) Posterior , onTimer Just started to execute
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)
{
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 up 1 Time timer
window.clearInterval(timer);
// Self-check the system time to get the time difference , From this, the time of the new timer started next time is obtained 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>
PS: Here are some time and timer related tools for your reference:
Online Stopwatch Tool:
http://tools.ofstack.com/bianmin/miaobiao
Unix timestamp (timestamp) conversion tool:
http://tools.ofstack.com/code/unixtime
Online time query around the world:
http://tools.ofstack.com/zhuanhuanqi/worldtime
More readers interested in JavaScript can check the topics of this site: "Summary of JavaScript Time and Date Operation Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithm and Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article is helpful to everyone's JavaScript programming.