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

我正在尝试将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>

以及在同一页面上的多个实例中执行此操作（例如，每页8个不同的倒计时）

我的另一个问题是，如果把其中的8个倒计时放在一页上，这会不会消耗很多资源

下面是我的JSFIDLE示例

CLEAN：（但是脚本现在根本不起作用，因为我似乎无法导入FlipClock JS库）

脏：（必须在“脚本”部分添加整个库，不能以任何其他方式加载）

我被要求发布到文档的链接（但我只能向我当前的代表发布2个链接）

---

您只需循环遍历所有

.clock-1

元素，并逐个初始化它们。像这样：

  (jQuery)('.clock-1').each(function(){

    var clock = (jQuery)(this).FlipClock(3600, {
        countdown: true,
        clockFace: 'DailyCounter',
    });

    clocks.push(clock);

  }); 

演示：

至于您关于资源使用的问题，您可以在页面打开时检查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);

  }); 

---

请注意，日期格式为

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>

好吧，希望能对你有所帮助

---

最后一个问题，我认为它会很好地工作。

JSFIDLE中的代码乱七八糟，难以阅读。也许你可以清理一下？我已经清理过了，但是JSFIDLE出于某种奇怪的原因不想加载FlipClockJS库，而且清理过的版本实际上不起作用，在肮脏的版本中，我清理了html，这是我所能做的，而不破坏它。FlipClockJS无法加载的原因是因为您需要通过HTTPS提供服务。类“clock-1”看起来像什么？这是一个很好的解决方案！但只解决了一半的问题，而不是从FlipClock（3600，它应该从data countdown=“21/07/2015 22:12:44”中提取“结束日期”）中提取时间这是问题的一部分：我明白了，我错过了问题的那一部分。我现在更新了我的答案。请注意，您需要更改日期格式，以便可以通过JavaScript解析。@alan0xd7 dude，您刚才复制了我的解决方案吗？在这种情况下，您也可以复制我的解释。我不确定您的意思，如果您查看我答案上的时间，您可以看到我发布了d在您之前。@alan0xd7哦，是的，您的第一个答案谢谢您的回答它工作得很好：）不确定资源消耗情况，这个vs单台，但我非常高兴吃晚饭thanks@KarolKierzkowski这实际上取决于用户的硬件。我不认为5个计数器会消耗这么多。我有一个问题，也许你可以帮我解决这个问题，如果数字低于60分钟，或者如果数量大于或等于100，我如何修改你的代码以添加一个类？我真的不理解你的意思。电话号码是多少？数据倒计时？谢谢回复！倒计时计时器以小时为单位对日期进行倒计时，我想知道是否可以设置它，以便根据“剩余小时数”向.clock-1添加不同的类

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

  }); 

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

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