js倒计时组件

Posted 2020-10-17 阮文武的网络日志

适用于一个页面里有多个相同倒计时的情况：

function countDownFun(option){
    if (!option.countDownEle || !option.price || !option.endDate || !option.specialPriceEle ) return false;
    
    this.countDownEle = option.countDownEle;    //获得显示倒计时的元素
    this.price = option.price;
    this.endDate = option.endDate;
    this.specialPriceEle = option.specialPriceEle;
    this.t = 0;    
}

countDownFun.prototype = {
    init : function(){
        var nowTime = Date.parse(new Date()); 
        this.t = this.endDate - nowTime;
    },

    getTimeDiff : function(){
        var shijiancha = this.t;
        if (shijiancha > 0) {
            /*d=Math.floor(t/1000/60/60/24);
            h=Math.floor(t/1000/60/60%24);
            m=Math.floor(t/1000/60%60);
            s=Math.floor(t/1000%60);*/
            var days    = shijiancha / 1000 / 60 / 60 / 24;
            var daysRound   = Math.floor(days);
            var hours    = shijiancha/ 1000 / 60 / 60 - (24 * daysRound);
            var hoursRound   = Math.floor(hours);
            var minutes   = shijiancha / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
            var minutesRound  = Math.floor(minutes);
            var seconds   = shijiancha/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
            //console.log(seconds);
            //console.log(oridays+\'-\'+hours+\'-\'+minutes+\'-\'+seconds);
            this.countDownEle.innerhtml = daysRound + "日" + hoursRound + "时" + minutesRound + "分" + seconds + "秒";
            //this.countDownEle.html(this.t);
        } else {
            clearInterval(this.timeObj);
            this.specialPriceEle.innerHTML = this.price;;
        }
    },
    
    tick : function(){
        var self = this;
        this.timeObj = setInterval(function(){
            self.getTimeDiff();
            self.t = self.t - 1000;
        },1000);
    }
}

使用：

var countDownArr = [];
var oList = document.querySelectorAll(".video-price");
var oListLength = oList.length;
for (var x=0;x < oListLength;x++){
    var option = {
            countDownEle : oList[x].querySelector(".countdown"),
            price: oList[x].getAttribute("price"),
            endDate : parseInt(oList[x].getAttribute("endDate")),
            specialPriceEle : oList[x].querySelector(".specialPrice"),
    }
    countDownArr[x] = new countDownFun(option);
    countDownArr[x].init();
    countDownArr[x].tick();
}

使用部分的代码不用细读，原理就是，生成参数option,然后实例化，然后调用init方法和tick方法就可以了。

效果：