Javascript обратный отсчет для определенного времени и даты

Question

Javascript обратный отсчет для определенного времени и даты

Я использую плагин jQuery для установки таймера обратного отсчета на моей веб-странице. В настоящее время код, управляющий отображением таймера, выглядит следующим образом:

<script type="text/javascript">

    var clock = $('.clock').FlipClock(3600 * 24 * 3, {

        clockFace: 'DailyCounter',

        countdown: true

    });

</script>

JS для плагина можно посмотреть здесь: https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js

Пример страницы используемого кода можно посмотреть здесь:
http://flipclockjs.com/faces/daily-counter

В настоящее время таймер представляет собой обратный отсчет в течение 3 дней, который сбрасывается каждый раз, когда страница обновляется. Я хочу использовать пользовательское время для таймера обратного отсчета, который будет абсолютным (не будет сброшен с обновлением страницы). Я хочу, чтобы дата была 30 сентября 2013 года в 12: 00 вечера по восточному времени (часовой пояс США - Калифорния).

Можно ли это сделать с помощью Javascript или jQuery?

625 3

jQuery javascript flipclock

3 ответов:

Comments

Ничего не найдено.

adeneo · Accepted Answer · 2015-05-11 12:53:19

Получите текущее время, и обратите внимание, что это будет время, установленное на часах компьютера пользователя, независимо от того, что установлено, и установите определенную дату, затем вычислите разницу и используйте ее для плагина:
var date  = new Date(Date.UTC(2013, 8, 30, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
});
Для точного времени я бы рекомендовал использовать ваш веб-сервер для вывода текущего времени.

Ahmed Fathy · Accepted Answer · 2015-05-11 12:54:08

Я бы так и сделал:
<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2013,8,30).getTime()/1000 - new Date().getTime()/1000, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>
Отсчет идет до даты 30 сентября 2013 года... Я еще не пробовал, так что не уверен, что это работает.

Edit: исправлена дата, которая должна быть новой датой (2013,8,30) вместо новой даты(2013,9,30), поскольку отсчет месяцев начинается с 0, а не с 1.

Jackson · Accepted Answer · 2013-08-26 01:18:56

Я использую первый арг .FlipClip () - это время до завершения обратного отсчета. Это время, "Т", должно быть разницей между настоящим моментом и целевым временем.
var t = targetTimeInMs - currentTimeInMs;
Чтобы получить текущее время, используйте конструктор даты no-arg.
var currentTimeInMs = new Date().getTime();
Чтобы получить целевое время, укажите дату с аргументами. Вот несколько примеров из MDN:
var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);
Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Я-нет. точно уверен, если вам нужно поставить миллисекунды в качестве первого arg для вашего .Функция FlipClip (). Для этого обратитесь к документации/источнику. Затем используйте соответствующий метод объекта Date, чтобы получить необходимую единицу измерения (секунды? минуты? часы? и использовать дату.getSeconds (), getHours () и т. д., см. MDN.)