1. 程式人生 > >js倒計時組件

js倒計時組件

elf body spa document 計時 技術分享 原理 urn special

適用於一個頁面裏有多個相同倒計時的情況:

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方法就可以了。

效果:

技術分享圖片

js倒計時組件