js倒计时组件

Posted 阮文武的网络日志

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js倒计时组件相关的知识,希望对你有一定的参考价值。

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

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倒计时组件的主要内容,如果未能解决你的问题,请参考以下文章

Relay.js 没有正确解析组合片段

jQuery倒计时组件(jquery.downCount.js)

微信小程序倒计时组件开发

js之封装(秒数)转化为时分秒倒计时组件 vue版本

JUC并发编程 共享模式之工具 JUC CountdownLatch(倒计时锁) -- CountdownLatch应用(等待多个线程准备完毕( 可以覆盖上次的打印内)等待多个远程调用结束)(代码片段

vscode代码片段生成vue模板