一个页面多个倒计时

方法一：

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

一个页面多个倒计时

猜你喜欢