This example shares the specific code for implementing multiple countdowns on a page for your reference. The specific content is as follows
Description: Method 1, Method 2 is the basic principle version, Method 3 upgraded version (refer to the little thing about mixing the for loop, timer, and closure.)
Method 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div style="color:red"></div>
<div style="color:red"></div>
</body>
<script>
function countDown( maxtime,fn ) {
var timer = setInterval(function() {
if( !!maxtime ){
var day = (maxtime / 86400),
hour = ((maxtime % 86400) / 3600),
minutes = ((maxtime % 3600) / 60),
seconds = (maxtime%60),
msg = "There is still a distance to end"+day+"sky"+hour+"hour"+minutes+"point"+seconds+"Second";
fn( msg );
--maxtime;
} else {
clearInterval( timer );
fn("Time is over!");
}
}, 1000);
}
countDown( 86,function( msg ) {
('timer1').innerHTML = msg;
})
countDown( 86400,function( msg ) {
('timer2').innerHTML = msg;
})
</script>
</html>
Method 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div ></div>
<div ></div>
<div ></div>
</body>
<script type="text/javascript">
var addTimer = function () {
var list = [],
interval;
return function (id, time) {
if (!interval)
interval = setInterval(go, 1000);
({ ele: (id), time: time });
}
function go() {
for (var i = 0; i < ; i++) {
list[i]. = getTimerString(list[i].time ? list[i].time -= 1 : 0);
if (!list[i].time)
(i--, 1);
}
}
function getTimerString(time) {
var not0 = !!time,
d = (time / 86400),
h = ((time %= 86400) / 3600),
m = ((time %= 3600) / 60),
s = time % 60;
if (not0)
return "besides" + d + "sky" + h + "Hour" + m + "point" + s + "Second";
else return "Time is here";
}
} ();
addTimer("timer1", 12);
addTimer("timer2", 10);
addTimer("timer3", 13);
</script>
</html>
Method 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div style="color:red"></div>
<div style="color:red"></div>
<div style="color:red"></div>
</body>
<script>
function countDown( maxtime,fn ) {
var timer = setInterval(function() {
if( !!maxtime ){
var day = (maxtime / 86400),
hour = ((maxtime % 86400) / 3600),
minutes = ((maxtime % 3600) / 60),
seconds = (maxtime%60),
msg = "There is still a distance to end"+day+"sky"+hour+"hour"+minutes+"point"+seconds+"Second";
fn( msg );
--maxtime;
} else {
clearInterval( timer );
fn("Time is over!");
}
}, 1000);
}
var aTime = [3600,3800,3900];
for ( var i = 0; i < 3; i++ ) {
(function (i) {
var obj = 'timer' + i;
countDown( aTime[i],function( msg ) {
(obj).innerHTML = msg;
})
})(i)
}
</script>
</html>
For more articles about countdown, please check out the topic:Countdown function
For more JavaScript clock effects, click to view:JavaScript clock special effects topic
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.