我想使用javascript在我的django网页的不同部分添加多个计时器

Question

我正在创建一个网站，其中有各种广告系列。

用户可以为此广告系列设置计时器。

有一个网页，其中列出了所有广告系列。

我想使用JavaScript为该特定表格中的每个广告系列显示一个计时器。

我创建了一个JavaScript函数，它占用超时并启动一个计时器，但我想一次显示多个计时器。

谢谢。

Answer 1

不久前我在同一页面也需要多个计时器，所以我创建了一个简单的间隔同步工具。主要目标是仅使用一个间隔移动所有计时器并节省CPU。

你可以在这里查看 - > https://ilian6806.github.io/Ticker/。

此外，如果您使用的是jQuery，则可以将其用作插件。

(function () {

    function secondsToTime(sec, colonBlinking) {

        sec = parseInt(sec, 10);

        if (sec <= 0) {
            return '00:00:00';
        }

        var days = Math.floor(sec / 86400);
        var hours = Math.floor((sec - days * 86400) / 3600);
        var minutes = Math.floor((sec - (hours * 3600) - (days * 86400)) / 60);
        var seconds = sec - (days * 86400) - (hours * 3600) - (minutes * 60);

        if (days > 0) { hours += (days * 24); }
        if (hours < 10) { hours = '0' + hours; }
        if (minutes < 10) { minutes = '0' + minutes; }
        if (seconds < 10) { seconds = '0' + seconds; }

        return hours + ':' + minutes + ':' + seconds;
    }

    $.fn.timer = function (ticker, time, callback) {

        if (!window.Ticker || !(ticker instanceof Ticker)) {
            return this;
        }

        var that = this;
        var currTickId = parseInt(this.data('jqTimerInterval'));

        if (currTickId) {
            ticker.clear(currTickId);
        }

        that.html(secondsToTime(time));

        var tickId = ticker.set(function () {
            time--;
            that.html(secondsToTime(time));
            if (time < 0) {
                ticker.clear(tickId);
                if ($.isFunction(callback)) {
                    callback();
                }
            }
        });

        this.data('jqTimerInterval', tickId);
        this.addClass('jq-timer');

        return this;
    };

    $.fn.clearTimers = function () {
        this.find('.jq-timer').each(function () {
            var currInterval = $(this).data('jqTimerInterval');
            if (currInterval) {
                clearInterval(currInterval);
            }
        });
        return this;
    };
})();

用法：

var ticker = new Ticker(1000); // This is the default value

$('#your-selector').timer(ticker, 3600 function() { 
    console.log('Done.');
});