Создайте таймер обратного отсчета всего за 18 строк JavaScript

Расписание часов автоматически

Допустим, мы хотим, чтобы часы показывались в определенные дни, а не в другие. Например, у нас может появиться ряд событий, и мы не хотим каждый раз обновлять часы вручную. Вот как можно запланировать вещи заранее.

Скрыть часы, установив его свойство display Затем добавьте следующее в функцию noneinitializeClock Это заставит часы отображаться только после var clockinitializeClock

 clock.style.display = 'block';

Далее мы можем указать даты, между которыми должны появиться часы. Это заменит переменную deadline

 var schedule = [
    ['Jul 25 2015', 'Sept 20 2015'],
    ['Sept 21 2015', 'Jul 25 2016'],
    ['Jul 25 2016', 'Jul 25 2030']
];

Каждый элемент в массиве schedule Как отмечалось выше, можно включать время и часовые пояса, но я использовал простые даты, чтобы код был читабельным.

Наконец, когда пользователь загружает страницу, нам нужно проверить, находимся ли мы в каком-либо из указанных временных интервалов. Этот код должен заменить предыдущий вызов функции initializeClock

 // iterate over each element in the schedule
for(var i=0; i<schedule.length; i++){
  var startDate = schedule[i][0];
  var endDate = schedule[i][1];

  // put dates in milliseconds for easy comparisons
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if(endMs > currentMs && currentMs >= startMs ){
      initializeClock('clockdiv', endDate);
  }
}

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

Обратный отсчет от того, когда пользователь прибывает

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

Все, что нам нужно сделать здесь, это заменить переменную deadline

 var timeInMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeInMinutes*60*1000);

Этот код занимает текущее время и добавляет десять минут. Значения преобразуются в миллисекунды, поэтому их можно сложить вместе и превратить в новый срок.

Теперь у нас есть часы, которые отсчитывают десять минут с момента прибытия пользователя. Не стесняйтесь играть и пробовать разные отрезки времени.

Поддерживать ход часов по страницам

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

Одним из решений является сохранение времени окончания часов в cookie. Таким образом, переход на новую страницу не сбрасывает время окончания до десяти минут.

Вот логика:

1. Если крайний срок был записан в куки, используйте этот крайний срок.
2. Если файл cookie отсутствует, установите новый срок и сохраните его в файле cookie.

Чтобы реализовать это, замените переменную deadline

 // if there's a cookie with the name myClock, use that value as the deadline
if(document.cookie && document.cookie.match('myClock')){
  // get deadline value from cookie
  var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}

// otherwise, set a deadline 10 minutes from now and 
// save it in a cookie with that name
else{
  // create deadline 10 minutes from now
  var timeInMinutes = 10;
  var currentTime = Date.parse(new Date());
  var deadline = new Date(currentTime + timeInMinutes*60*1000);

  // store deadline in cookie for future reference
  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}

В этом коде используются файлы cookie и регулярные выражения , которые сами по себе являются отдельными темами. По этой причине я не буду вдаваться в подробности. Важно отметить, что вам нужно изменить .yourdomain.com Если у вас есть какие-либо вопросы по этому поводу, дайте мне знать в комментариях.

Важное предупреждение о времени на стороне клиента

JavaScript даты и время взяты с компьютера пользователя. Это означает, что пользователь может влиять на часы JavaScript, изменяя время на своем компьютере. В большинстве случаев это не имеет значения, но в случае чего-то сверхчувствительного, необходимо будет получить время с сервера. Это можно сделать с помощью небольшого количества PHP или Ajax, которые выходят за рамки данного руководства.

В любом случае, получив время с сервера, мы можем работать с ним, используя те же приемы на стороне клиента, что и в этом руководстве.

Вывод

Мы рассмотрели, как сделать базовые часы обратного отсчета и подготовить их к эффективному отображению. Мы также перешли к планированию, абсолютному и относительному времени и сохранению состояния часов при просмотре страниц.

Что дальше?

Поиграйте с вашим кодом часов. Попробуйте добавить некоторые творческие стили или новые функции (например, кнопки паузы и возобновления). Если у вас есть какие-нибудь классные примеры часов, которыми вы хотели бы поделиться, или у вас есть вопросы о том, что мы рассмотрели здесь, пожалуйста, дайте мне знать в комментариях.