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

化蝶自在飞

浏览: 2336405 次
性别:
来自: 武汉

最近访客更多访客>>

kkjjww123

morelily

wanglu187287

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript SVN Go HTML XHTML

js倒计时代码:

<!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
<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>

分享到：

html 弹窗代码_js弹窗代码,24小时内只弹 ... | dede 模板 php写法

2010-11-21 20:50
浏览 11982
评论(1)
分类:Web前端
查看更多

1 楼化蝶自在飞 2011-01-23

有需要天小时分秒显示的,可以使用下面的代码来:

days = Math.floor(maxtime/86400);
hours = Math.floor(days>=1?(maxtime-days*86400)/3600:maxtime/3600);
minutes = Math.floor((maxtime-days*86400-hours*3600)/60);
seconds = Math.floor(maxtime%60);

msg = "距离结束还有"+days+"天"+hours+"小时"+minutes+"分"+seconds+"秒";

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论