js實現，同一頁面多個倒計時

原創

2020-02-21 06:47

來源：http://tuzwu.javaeye.com/blog/819081 js交流羣：56484577

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <title>Timer - by Vilic JavaScriptQQ交流羣56484577</title> </head> <body> <div id="timer1"> </div> <div id="timer2"> </div> <div id="timer3"> </div> </body> <script type="text/javascript"> var addTimer = function () { var list = [], interval; return function (id, time) { if (!interval) interval = setInterval(go, 1000); list.push({ ele: document.getElementById(id), time: time }); } function go() { for (var i = 0; i < list.length; i++) { list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0); if (!list[i].time) list.splice(i--, 1); } } function getTimerString(time) { d = Math.floor(time / 86400), h = Math.floor((time % 86400) / 3600), m = Math.floor(((time % 86400) % 3600) / 60), s = Math.floor(((time % 86400) % 3600) % 60); if (time>0) return d + "天" + h + "小時" + m + "分" + s + "秒"; else return "時間到"; } } (); addTimer("timer1", 99999); addTimer("timer2", 66666); addTimer("timer3", 33333); </script> </html>

另一方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>js倒計時代碼 - k686綠色軟件 - http://www.k686.com</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="k686綠色軟件 http://www.k686.com"> <meta name="Keywords" content="綠色軟件"> <meta name="Description" content="綠色軟件"> </head> <body> k686綠色軟件 - http://www.k686.com <mce:script type="text/javascript"></mce:script> <div id="timer1" style="color:red" mce_style="color:red"></div> <div id="timer2" style="color:red" mce_style="color:red"></div> <mce:script type="text/javascript"></mce:script> </body> </html>

調用：

countDown( 6,function( msg ) { document.getElementById('timer1').innerHTML = msg; });