js实现多个列表分别倒计时功能 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->
</head>

<body>

<p><span class="remainedTime-diffTime">3605000</span></p>
<p><span class="remainedTime-diffTime">36050000</span></p>
    
<script>
    function remainedTimeAct (cls,str_format){ // d,h,m,s
        var startTime_1 = new Date(2020,1,20,12,00,00);
        var endTime_1   = new Date(2020,1,20,13,00,05);
        var testTime = endTime_1.getTime() - startTime_1.getTime();
        console.log(testTime)
        var ary_format = str_format.split(',');
        $(cls).each(function(){
            (function (that){
                var diffTime = parseInt(that.text()), //时间差，毫秒
                    obj_time = {},
                    d, h, m, s, clearT;
                function soCount(){
                    d = Math.floor(diffTime/1000/60/60/24);
                    h = Math.floor(diffTime/1000/60/60) % 24;
                    m = Math.floor(diffTime/1000/60) % 60;
                    s = Math.floor(diffTime/1000) % 60;

                    obj_time.d = '<span class="day">' + d + '天</span>';
                    obj_time.h = '<span class="hour">' + (h.toString().length == 1 ? '0' + h : h) + '小时</span>';
                    obj_time.m = '<span class="minute">' + (m.toString().length == 1 ? '0' + m : m) + '分</span>';
                    obj_time.s = '<span class="second">' + (s.toString().length == 1 ? '0' + s : s) + '秒</span>';

                    var html = '';
                    for(var i = 0, len = ary_format.length; i < len; i++){
                        html += obj_time[ary_format[i]];
                    }
                    that.html(html);
                    diffTime -= 1000;
                    clearT = setTimeout(soCount,1000);
                    if(diffTime < 0){
                        clearTimeout(clearT);
                        that.html('已超时');
                    }
                }
                soCount();
            })($(this));
        });

    }

    remainedTimeAct('.remainedTime-diffTime','d,h,m,s')
</script>
</body>

</html>

 

 

******** 2021-5-13 ************

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->
</head>

<body>

<p><span class="remainedTime-diffTime">3605000</span></p>
<p><span class="remainedTime-diffTime">36050000</span></p>
<p>动态取值（2021年5月20日到期）：<span class="remainedTime-diffTime newtime">36050000</span></p>
<p>动态取值2（2021年5月15日到期）：<span class="remainedTime-diffTime newtime2">36050000</span></p>
    
<script>
    function remainedTimeAct (cls,str_format){ // d,h,m,s
        var startTime_1 = new Date(2020,1,20,12,00,00);
        var endTime_1   = new Date(2020,1,20,13,00,05);
        var testTime = endTime_1.getTime() - startTime_1.getTime();
        console.log(testTime)
        var ary_format = str_format.split(',');
        $(cls).each(function(){
            (function (that){
                var diffTime = parseInt(that.text()), //时间差，毫秒
                    obj_time = {},
                    d, h, m, s, clearT;
                function soCount(){
                    d = Math.floor(diffTime/1000/60/60/24);
                    h = Math.floor(diffTime/1000/60/60) % 24;
                    m = Math.floor(diffTime/1000/60) % 60;
                    s = Math.floor(diffTime/1000) % 60;

                    obj_time.d = '<span class="day">' + d + '天</span>';
                    obj_time.h = '<span class="hour">' + (h.toString().length == 1 ? '0' + h : h) + '小时</span>';
                    obj_time.m = '<span class="minute">' + (m.toString().length == 1 ? '0' + m : m) + '分</span>';
                    obj_time.s = '<span class="second">' + (s.toString().length == 1 ? '0' + s : s) + '秒</span>';

                    var html = '';
                    for(var i = 0, len = ary_format.length; i < len; i++){
                        html += obj_time[ary_format[i]];
                    }
                    that.html(html);
                    diffTime -= 1000;
                    clearT = setTimeout(soCount,1000);
                    if(diffTime < 0){
                        clearTimeout(clearT);
                        that.html('已超时');
                    }
                }
                soCount();
            })($(this));
        });

    }


    let ovetTime = new Date("05 20,2021").getTime();

    let currentTime = new Date().getTime();

    console.log('到期时间',ovetTime);
    console.log('当前时间',currentTime)


    let ovetTime2 = new Date("05 15,2021").getTime();

    $(".newtime").text(ovetTime-currentTime);
    $(".newtime2").text(ovetTime2-currentTime);

    remainedTimeAct('.remainedTime-diffTime','d,h,m,s')
</script>
</body>

</html>

　　

posted @ 2020-01-20 10:14  炽橙子  阅读(2146)  评论(1)    收藏  举报