FlipClock - 多个实例 - 在数据倒计时中计数到特定日期
FlipClock - Multiple instances - Counting to specific date in data-countdown
我正在尝试使 FlipClock JS 倒计时到此标记中指定的日期:
<script>
(jQuery)(document).ready(function() {
clocks.push((jQuery)('.clock-1').FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
}));
});
</script>
<div class="clock-1" data-countdown="15/07/2015 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="15/07/2015 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="16/07/2015 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
如同使用
中的日期 + 时间
data-countdown="21/07/2015 22:12:44"
以及在同一页面上的多个实例中执行此操作(例如每页 8 个不同的倒计时)
我的另一个问题是,在一个页面上放置 8 个倒计时是否不会占用太多资源?
这是我的 JSFiddle 示例
CLEAN:https://jsfiddle.net/jx0mmvLq/(但脚本现在根本不起作用,因为我似乎无法导入 FlipClock JS 库)
DIRTY:https://jsfiddle.net/haj070g3/1/(必须在 "script" 部分添加整个库无法使其以任何其他方式加载)
我被要求 post 链接到文档(但我只能 post 2 个与我当前代表的链接)
http://flipclockjs.com/
你只需要遍历所有.clock-1
个元素,并一一初始化。像这样:
(jQuery)('.clock-1').each(function(){
var clock = (jQuery)(this).FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
演示:https://jsfiddle.net/alan0xd7/haj070g3/2/
关于您关于资源使用的问题,您可以在页面打开时检查 Windows 任务管理器,并确定它是否使用过多 CPU。
更新:
支持从数据属性获取时间:
(jQuery)('.clock-1').each(function(){
var time = (jQuery)(this).data("countdown");
time = ((new Date(time))-(new Date().getTime()))/1000;
var clock = (jQuery)(this).FlipClock(time, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
https://jsfiddle.net/alan0xd7/haj070g3/4/
请注意日期格式为 YYYY/MM/DD HH:MM:SS
所以,首先,让我们更改您的日期格式:mm/dd/yyyy hh:mm:ss
到 yyyy/mm/dd hh:mm:ss
。
现在您的 HTML 代码如下所示:
<div class="clock-1" data-countdown="2015/07/15 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/15 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/16 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
我看到当您可以将插件应用于许多元素时,插件不提供该功能。所以让我们这样做吧。您需要使用 $.each
并为每个元素申请此插件。
此外,您需要将日期转换为时间戳。 JavaScript 提供 Date
个对象:new Date('yyyy/mm/dd hh:mm:ss').getTime()
。但它给了我们自 1970/01/01 00:00:00 以来的毫秒数。除以 1000 没问题。
你还需要一件事。当您获得秒数时,您从 1970/01/01 开始获得它,但您希望在未来的当前日期之前获得秒数。因此,您只需获取当前时间并将其从未来日期中减去即可。
所有这些动作看起来像:
$(document).ready(function() {
var clocks = [];
$('.clock-1').each(function() {
var clock = $(this),
date = (new Date(clock.data('countdown')).getTime() - new Date().getTime()) / 1000;
clock.FlipClock(date, {
clockFace: 'DailyCounter',
countdown: true
});
clocks.push(clock);
});
});
好了,希望对你有所帮助。
你的最后一个问题,我认为它会很有效。
我正在尝试使 FlipClock JS 倒计时到此标记中指定的日期:
<script>
(jQuery)(document).ready(function() {
clocks.push((jQuery)('.clock-1').FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
}));
});
</script>
<div class="clock-1" data-countdown="15/07/2015 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="15/07/2015 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="16/07/2015 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
如同使用
中的日期 + 时间data-countdown="21/07/2015 22:12:44"
以及在同一页面上的多个实例中执行此操作(例如每页 8 个不同的倒计时)
我的另一个问题是,在一个页面上放置 8 个倒计时是否不会占用太多资源?
这是我的 JSFiddle 示例
CLEAN:https://jsfiddle.net/jx0mmvLq/(但脚本现在根本不起作用,因为我似乎无法导入 FlipClock JS 库)
DIRTY:https://jsfiddle.net/haj070g3/1/(必须在 "script" 部分添加整个库无法使其以任何其他方式加载)
我被要求 post 链接到文档(但我只能 post 2 个与我当前代表的链接)
http://flipclockjs.com/
你只需要遍历所有.clock-1
个元素,并一一初始化。像这样:
(jQuery)('.clock-1').each(function(){
var clock = (jQuery)(this).FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
演示:https://jsfiddle.net/alan0xd7/haj070g3/2/
关于您关于资源使用的问题,您可以在页面打开时检查 Windows 任务管理器,并确定它是否使用过多 CPU。
更新:
支持从数据属性获取时间:
(jQuery)('.clock-1').each(function(){
var time = (jQuery)(this).data("countdown");
time = ((new Date(time))-(new Date().getTime()))/1000;
var clock = (jQuery)(this).FlipClock(time, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
https://jsfiddle.net/alan0xd7/haj070g3/4/
请注意日期格式为 YYYY/MM/DD HH:MM:SS
所以,首先,让我们更改您的日期格式:mm/dd/yyyy hh:mm:ss
到 yyyy/mm/dd hh:mm:ss
。
现在您的 HTML 代码如下所示:
<div class="clock-1" data-countdown="2015/07/15 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/15 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/16 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
我看到当您可以将插件应用于许多元素时,插件不提供该功能。所以让我们这样做吧。您需要使用 $.each
并为每个元素申请此插件。
此外,您需要将日期转换为时间戳。 JavaScript 提供 Date
个对象:new Date('yyyy/mm/dd hh:mm:ss').getTime()
。但它给了我们自 1970/01/01 00:00:00 以来的毫秒数。除以 1000 没问题。
你还需要一件事。当您获得秒数时,您从 1970/01/01 开始获得它,但您希望在未来的当前日期之前获得秒数。因此,您只需获取当前时间并将其从未来日期中减去即可。
所有这些动作看起来像:
$(document).ready(function() {
var clocks = [];
$('.clock-1').each(function() {
var clock = $(this),
date = (new Date(clock.data('countdown')).getTime() - new Date().getTime()) / 1000;
clock.FlipClock(date, {
clockFace: 'DailyCounter',
countdown: true
});
clocks.push(clock);
});
});
好了,希望对你有所帮助。
你的最后一个问题,我认为它会很有效。