码迷,mamicode.com
首页 > Web开发 > 详细

js倒计时组件

时间:2017-12-11 14:19:28      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:getattr   ges   部分   gettime   pre   time   htm   alt   minutes   

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

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倒计时组件

标签:getattr   ges   部分   gettime   pre   time   htm   alt   minutes   

原文地址:http://www.cnblogs.com/doubilaile/p/8021892.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!