javascript 天时分秒商品列表页面多个倒计时

发布于 2020-11-11  71 次阅读


页面结构

<ul id="list-box">
            <li class="flex">
                <div class="img-box align-center">
                    <a href="">
                        <img src=""/>
                    </a>
                </div>
                <div class="text cell">
                    <div class="flex"><span class="name cell ect">优乐拍套餐一</span><span class="price">¥248.00</span></div>
                    <div class="flex"><span class="describe cell ect">周期:30天 利息10%</span><span class="num">X1</span></div>
                    <div class="flex"><span class="time cell ect" data-time="1542866820123">剩余时间:30天15小时</span></div>
                    <div class="flex"><span class="trustee-btn">领取收益</span></div>
                </div>
            </li>
            <li class="flex">
                <div class="img-box align-center">
                    <a href="">
                        <img src=""/>
                    </a>
                </div>
                <div class="text cell">
                    <div class="flex"><span class="name cell ect">优乐拍套餐一</span><span class="price">¥248.00</span></div>
                    <div class="flex"><span class="describe cell ect">周期:30天 利息10%</span><span class="num">X1</span></div>
                    <div class="flex"><span class="time cell ect" data-time="1540260060123">剩余时间:30天15小时</span></div>
                    <div class="flex"><span class="trustee-btn">领取收益</span></div>
                </div>
            </li>
        </ul>

JS代码 不依赖JQ

var box=document.getElementById('list-box');
    var list=box.querySelectorAll('li');
    var listTime=box.querySelectorAll('.time');
    var rusteeBtn=box.querySelectorAll('.trustee-btn');
    for(var i=0;i<list.length;i++){
        var time=listTime[i].getAttribute('data-time');
        var times=setTime((time)*1);
        toTime(listTime[i],times,rusteeBtn[i]);
    }
    //时间戳转日期
    function  setTime(time){
        var date = new Date(time);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return (Y+M+D+h+m+s)
    }
    function addNum(num){
        if(num<10){
            return '0'+num;
        }
        else{
            return num;
        }
    };
    //倒计时开始
    function toTime(obj,wDays,btn){
        var time=null;
        time=setInterval(function(){
            var nowDate = new Date();
            var newDate = new Date(wDays);
            var disTime = newDate.getTime() - nowDate.getTime();
            if(disTime <= 0){
                clearInterval(time);
                obj.innerHTML ='到期请领取收益';
                btn.classList.add('red');
            }else{
                var cha = Math.ceil((newDate.getTime()-nowDate.getTime())/1000);
                var iDays = Math.floor(cha/3600/24);
                var iHours = addNum( Math.floor(cha/3600%24) );
                var iMins = addNum( Math.floor(cha/60%60) );
                var iSec = addNum( Math.ceil(cha%60) );
                obj.innerHTML ='剩余时间:'+iDays+'天'+iHours+'小时'+iMins+'分'+iSec+'秒';
            }
        },100);
    };

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。