适用于一个页面里有多个相同倒计时的情况:
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方法就可以了。
效果: