web - 一个页面多个倒计时 js

最新推荐文章于 2021-06-09 18:27:08 发布

LerTong

最新推荐文章于 2021-06-09 18:27:08 发布

阅读量3.4k

点赞数 2

分类专栏： JS 文章标签： js js倒计时

本文链接：https://blog.csdn.net/ootiantong/article/details/83409942

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明： 方法1，方法二是基础原理版，方法三升级版（参考for循环，定时器，闭包混合一块的那点事。）

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body> 
  
    <div id="timer1" style="color:red"></div>  
    <div id="timer2" style="color:red"></div>  

</body>  
<script> 
    function countDown( maxtime,fn )  {     
        var timer = setInterval(function() {  
               if( !!maxtime ){     
                   var day = Math.floor(maxtime / 86400),
                   hour = Math.floor((maxtime % 86400) / 3600),
                minutes = Math.floor((maxtime % 3600) / 60),  
                seconds = Math.floor(maxtime%60),    
                msg = "距离结束还有"+day+"天"+hour+"时"+minutes+"分"+seconds+"秒";     
                fn( msg );  
                --maxtime;     
            } else {     
                clearInterval( timer );  
                fn("时间到，结束!");    
            }     
        }, 1000);  
    }  
    countDown( 86,function( msg ) {  
        document.getElementById('timer1').innerHTML = msg;  
    })  
    countDown( 86400,function( msg ) {  
        document.getElementById('timer2').innerHTML = msg;  
    })  
</script>  
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</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>

方法三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body> 
  
    <div id="timer0" style="color:red"></div>  
    <div id="timer1" style="color:red"></div>  
    <div id="timer2" style="color:red"></div>
</body>  
<script> 
    function countDown( maxtime,fn )  {     
        var timer = setInterval(function() {  
               if( !!maxtime ){     
                   var day = Math.floor(maxtime / 86400),
                   hour = Math.floor((maxtime % 86400) / 3600),
                minutes = Math.floor((maxtime % 3600) / 60),  
                seconds = Math.floor(maxtime%60),    
                msg = "距离结束还有"+day+"天"+hour+"时"+minutes+"分"+seconds+"秒";     
                fn( msg );  
                --maxtime;     
            } else {     
                clearInterval( timer );  
                fn("时间到，结束!");    
            }     
        }, 1000);  
    }  
    var aTime = [3600,3800,3900];
    for ( var i = 0; i < 3; i++ ) {
        (function (i) {
            var obj = 'timer' + i;
            countDown( aTime[i],function( msg ) {  
                document.getElementById(obj).innerHTML = msg;  
            }) 
        })(i)
    }
     
    
</script>  
</html>

转载：http://www.cnblogs.com/wangyihong/p/9207681.html

LerTong

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web - 一个页面多个倒计时 js

说明：方法1，方法二是基础原理版，方法三升级版（参考for循环，定时器，闭包混合一块的那点事。）方法一：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时&lt;/title&gt;&am
复制链接

扫一扫