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示例

CLEAN：https://jsfiddle.net/jx0mmvLq/（但脚本现在根本不起作用，因为好像我无法导入FlipClock JS库）

DIRTY：https://jsfiddle.net/haj070g3/1/（必须在＆＃34;脚本中添加整个库＆＃34;部分无法以任何其他方式加载它）

我被要求发布文档链接（但我只能发布与我当前代表的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年1月1日之后得到它，但是你想在未来的当前日期获得第二名。因此，您只需获取当前时间并从未来日期中减去它。

所有这些行为都是这样的：

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

嗯，希望它能帮到你。

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

Answer 2

您只需遍历所有.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

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

2 个答案: