js实现，同一页面多个倒计时时间：2021-10-09 23:33:59来源：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"><!-- function countDown( maxtime,fn ) { var timer = setInterval(function() { if(maxtime>=0){ minutes = Math.floor(maxtime/60); seconds = Math.floor(maxtime%60); msg = "距离结束还有"+minutes+"分"+seconds+"秒"; fn( msg ); if(maxtime == 5*60) alert('注意，还有5分钟!'); --maxtime; } else{ clearInterval( timer ); fn("时间到，结束!"); } }, 1000); } // --></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"><!-- countDown( 6,function( msg ) { document.getElementById('timer1').innerHTML = msg; }); countDown( 6000,function( msg ) { document.getElementById('timer2').innerHTML = msg; }) // --></mce:script> </body> </html> 调用： countDown( 6,function( msg ) { document.getElementById('timer1').innerHTML = msg; });
