js倒计时代码支持同一页面多个倒计时代码(转)

js倒计时代码:

<!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倒计时代码支持同一页面多个倒计时代码(转)相关推荐

HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
android中用代码实现禁止页面旋转,Android通过代码禁止屏幕旋转
最近在做一个组件,需要让Activity保持启动时的方向而不旋转,查询了网上的办法,大都是通过修改Manifest文件实现屏幕方向的设置,但是这样的方式无法实现我要的效果,即保持横屏或竖屏. 最后,通 ...
前端页面后台管理模板—代码实例
今天分享下"前端页面后台管理模板"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧.近期自身 ...
html网页点击按钮闪现怎么解决,解决使用Vue.js显示数据的时,页面闪现原始代码的问题...
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 [v-cloak] { display ...
jquery发送手机验证码倒计时插件支持页面刷新
在最新项目中需要用到发送短信短信验证码,网上搜了半天找不到满意的,就自己写了一个. jquery封装好的发送手机验证码倒计时插件采用cookie 防止页面刷新. 实现思路: 1.实现点击按钮,对手机 ...
html加js倒计时代码,分享最简单的JavaScript倒计时代码（附完整代码）
工作中经常需要在页面中设置倒计时,那你知道JS倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的JS倒计时代码,以及详细的倒计时JS代码的思路,,有一定的参考价值,感兴趣的朋友可以看看. 举例:设定 ...
[js] 在不支持js的浏览器中如何隐藏JavaScript代码？
[js] 在不支持js的浏览器中如何隐藏JavaScript代码? 在<script>标签之后的代码中添加"<!-– ",不带引号. 在</script&g ...
wxml代码支持js代码吗_如何取胜：代码支持者的建议
wxml代码支持js代码吗 I had the honor of asking three of the world's most famous software engineers six ques ...

js倒计时代码支持同一页面多个倒计时代码(转)

js倒计时代码支持同一页面多个倒计时代码(转)相关推荐

最新文章

热门文章

js倒计时代码 支持同一页面多个倒计时代码(转)

js倒计时代码 支持同一页面多个倒计时代码(转)相关推荐

最新文章

热门文章

js倒计时代码支持同一页面多个倒计时代码(转)

js倒计时代码支持同一页面多个倒计时代码(转)相关推荐