javascript - FlipClock - 多个实例 - 在数据倒计时中计数到特定日期

Question

我正在尝试使 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 示例

清洁:https://jsfiddle.net/jx0mmvLq/ (但脚本现在根本不起作用，因为我似乎无法导入 FlipClock JS 库)

脏:https://jsfiddle.net/haj070g3/1/ (必须在“脚本”部分添加整个库无法使其以任何其他方式加载)

我被要求发布文档链接(但我只能发布 2 个与我当前代表的链接)

http://flipclockjs.com/

Answer 1

所以，首先，让我们更改日期格式: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 开始获得它，但您希望在未来的当前日期之前获得秒数。因此，您只需获取当前时间并从 future 日期中减去它。

所以所有这些 Action 看起来像:

$(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);
    });
});

嗯，希望对你有帮助。

关于你的最后一个问题，我认为它会运作良好。