FlipClock - несколько экземпляров - подсчет до определенной даты в обратном отсчете данных

Итак, прежде всего, давайте изменим ваш формат даты: 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(). Но это дает нам миллисекунды с 01.01.1970 00:00:00. Не проблема, просто разделите на 1000.

Еще одна вещь, которая вам нужна. Когда вы получаете секунды, вы получаете их с 01.01.1970, но вы хотите получить секунды к текущей дате в будущем. Итак, вы просто получаете текущее время и вычитаете его из будущей даты.

Итак, все эти действия выглядят так:

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

Ну, в надежде, что это поможет вам.

И ваш последний вопрос, я думаю, он сработает.

Вам просто нужно перебрать все элементы .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, пока ваша страница открыта, и определить, использует ли она слишком много ЦП или нет.

Обновление:

Для поддержки получения времени из атрибута данных:

  (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