繁体   English   中英

带有日期:小时:分钟的JS倒数计时器

[英]JS Countdown timer with days:hours:minutes

我找到了一个整洁的计时器,但是我需要对其进行一些自定义,以适合我的项目,我尝试更改javascript代码,这样将一直倒数到周末,然后从ex:6days:23hours:59minutes重新开始,但是我惨败

我也想知道如何添加第三行,称为天

http://codepen.io/anon/pen/ZYEBjP

JS代码

var Clock = (function(){

    var exports = function(element) {
        this._element = element;
        var html = '';
        for (var i=0;i<6;i++) {
            html += '<span>&nbsp;</span>';
        }
        this._element.innerHTML = html;
        this._slots = this._element.getElementsByTagName('span');
        this._tick();
    };

    exports.prototype = {

        _tick:function() {
            var time = new Date();
            this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
            var self = this;
            setTimeout(function(){
                self._tick();
            },1000);
        },

        _pad:function(value) {
            return ('0' + value).slice(-2);
        },

        _update:function(timeString) {

            var i=0,l=this._slots.length,value,slot,now;
            for (;i<l;i++) {

                value = timeString.charAt(i);
                slot = this._slots[i];
                now = slot.dataset.now;

                if (!now) {
                    slot.dataset.now = value;
                    slot.dataset.old = value;
                    continue;
                }

                if (now !== value) {
                    this._flip(slot,value);
                }
            }
        },

        _flip:function(slot,value) {

            // setup new state
            slot.classList.remove('flip');
            slot.dataset.old = slot.dataset.now;
            slot.dataset.now = value;

            // force dom reflow
            slot.offsetLeft;

            // start flippin
            slot.classList.add('flip');

        }

    };

    return exports;
}());

var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {
    new Clock(clocks[i]);
}

我将创建一个助手:

var TimeHelper = function(days, hours, minutes, callback) {

    this.subtractMinute = function() {
        minutes = (minutes + 60 - 1) % 60;
        if (minutes === 0) {
            hours = (hours + 60 - 1) % 60;
            if (hours === 0) {
                days = (days + 24 - 1) % 24;
                if (days === 0) {
                    days = 24;
                    hours = 0;
                    minutes = 0;
                }
            }
        }
        callback(days, hours, minutes);
    }
}

function refreshUI(days, hours, minutes) {
    //refresh my ui elements
}

var timeHelper = new TimeHelper(24, 0, 0);

然后您可以每分钟调用一次timeHelper.subtractMinute / timeHelper.subtractMinute

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM