我想使用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.');
});