js倒计时代码 支持同一页面多个倒计时代码(转)
2015-07-31 09:52
615 查看
js倒计时代码:
忠心感谢来自56484577Q群的wait提供的代码: http://waitdemos.googlecode.com/svn/trunk/tdemos/countDown.html
此代码的优点在于调用时可不用对功能代码做任何修改.需要显示的地方设定容器id,然后输出一小段代码,一个页面无限制倒计时个数:
就可以了.
下面一段代码是来自同一个交流群的大神Vilic优化简写后的代码,在此一并表示感谢:
转自:http://tuzwu.iteye.com/blog/819081
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>js倒计时代码</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 <script> 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); } </script> <div id="timer1" style="color:red"></div> <div id="timer2" style="color:red"></div> <script> countDown( 6,function( msg ) { document.getElementById('timer1').innerHTML = msg; }); countDown( 6000,function( msg ) { document.getElementById('timer2').innerHTML = msg; }) </script> </body> </html>
忠心感谢来自56484577Q群的wait提供的代码: http://waitdemos.googlecode.com/svn/trunk/tdemos/countDown.html
此代码的优点在于调用时可不用对功能代码做任何修改.需要显示的地方设定容器id,然后输出一小段代码,一个页面无限制倒计时个数:
countDown( 6,function( msg ) { document.getElementById('timer1').innerHTML = msg; });
就可以了.
下面一段代码是来自同一个交流群的大神Vilic优化简写后的代码,在此一并表示感谢:
<!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) { var not0 = !!time, d = Math.floor(time / 86400), h = Math.floor((time %= 86400) / 3600), m = Math.floor((time %= 3600) / 60), s = time % 60; if (not0) return "还有" + d + "天" + h + "小时" + m + "分" + s + "秒"; else return "时间到"; } } (); addTimer("timer1", 12); addTimer("timer2", 10); addTimer("timer3", 13); </script> </html>
转自:http://tuzwu.iteye.com/blog/819081
相关文章推荐
- js实时获取并显示当前时间的方法
- JavaScript实现瀑布流布局
- Javascript实现的Map集合工具类完整实例
- EasyUI+Javascript+MVC 实现三级级联(二)
- javascript入门系列演示・三种弹出对话框的用法实例
- JSP2.0自定义标签
- js实现炫酷的返回顶部功能
- JS特效实现图片自动播放并可控的效果
- 另类SEO分享:利用JS封装iframe骗过搜索引擎
- Javascript编程风格
- Javascript
- Javascript定义类(class)的三种方法
- fastJSON
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- extjs4.1环境搭建
- extjs类继承图之组件(1)
- 理解JavaScript闭包
- 【转】js正则表达exec和match的区别
- JavaScript权威指南_145_第15章_脚本化文档_15.9-HTML表单-选择框和选项元素