javascript - 我想使用 javascript 在 django 网页的不同部分添加多个计时器
问题描述
我正在创建一个网站,其中有各种活动。
用户可以为此活动设置计时器。
有一个网页,其中所有广告系列都列在表格中。
我想使用 JavaScript 为该特定表中的每个广告系列显示一个计时器。
我创建了一个 JavaScript 函数,它需要一个超时并启动一个计时器,但我想一次显示多个计时器。
谢谢你。
解决方案
不久前我还需要在同一个页面中使用多个计时器,所以我创建了一个简单的间隔同步工具。主要目标是仅以一个间隔移动所有计时器并节省 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.');
});
推荐阅读
- c# - 如何销毁和实例化游戏对象?
- typescript - 如何处理在Angular 6中返回带有resolve和reject的Promise的函数的测试用例
- c++ - 我的 unordered_set 元素在范围内更改而不修改它们
- azure - Azure CosmosDB:存储过程根据查询删除文档
- here-api - 这里地图使用的TTS引擎是什么
- docker - Dockerizing 一个面向包的设计 go modules 应用程序
- unity3d - Android 上的 Unity GPS 位置不经常更新
- python - Python 导入失败并带有崇高的文本,但程序通过控制台运行
- scala - 在另一个生成器中使用 ScalaCheck 生成器
- php - 使用 PHP 检测纯文本中的表情符号