Question

我写了一个简单的Javascript函数（codecall.net的cu）来创建倒计时器。

我运行它时工作正常，但我想在页面上有多个计时器。

当我将函数放在另一个div中时，我得到屏幕上的数字，但最后一个函数中只有一个实际倒计时。

I have placed a link to the code here in JsFiddle由于某种原因不希望运行它，但它有效。我只需要它的多个实例。

非常感谢任何帮助，提前谢谢

Answer 1

您在全局命名空间中构建它的方式使得合并两个计时器变得非常困难。相反，您应该只使用可重用的对象构造函数。 Demo here

function Countdown(element, time) {
    this.element = element;
    this.time = time;
}

Countdown.time = function() {
    return new Date().getTime() / 1000;
};

Countdown.formatRemaining = function(timeRemaining) {
    function fillZero(n) {
        return n < 10 ? '0' + n : n.toString();
    }

    var days = timeRemaining / 60 / 60 / 24 | 0;
    var hours = timeRemaining / 60 / 60 | 0;
    var minutes = timeRemaining / 60 | 0;
    var seconds = timeRemaining | 0;

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    return days + ' day' + (days === 1 ? '' : 's') + ' ' + fillZero(hours) + ':' + fillZero(minutes) + ':' + fillZero(seconds);
};

Countdown.prototype.update = function() {
    var timeRemaining = this.time + this.start - Countdown.time();

    if(timeRemaining > 0) {
        this.element.innerHTML = Countdown.formatRemaining(timeRemaining);
    } else {
        this.element.innerHTML = "Time's up!";

        if(this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
};

Countdown.prototype.start = function() {
    var countdown = this;

    this.start = Countdown.time();
    this.timer = setInterval(function() {
        countdown.update();
    }, 1000);

    this.update();
};

Objectify Javascript - 如何多次运行Javascript函数

1 个答案: