zoukankan html css js c++ java

一个页面多个倒计时

一个页面多个倒计时

　　　　说明： 方法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>

查看全文

相关阅读:
面向对象 & sql语句
 MySQL--数据库面试题汇集
 MySQL优化
 JAVA日报
 JAVA日报
 JAVA日报
 JAVA日报
 JAVA日报
 《大道至简》读后感
 JAVA日报

原文地址：https://www.cnblogs.com/wangyihong/p/9207681.html