Как найти на сайте таймер

Время на прочтение
4 мин

Количество просмотров 8.4K

Визуализация динамического процесса на графике — один из способов получения новой/дополнительной информации. В публикации показана простая утилита, с помощью которой можно увидеть работу JavaScript-таймеров. С одной стороны, JavaScript-таймеры хорошо подходят для организации циклического процесса. С другой стороны, они, в общем виде, наглядно демонстрируют поведение однопоточной JavaScript-многозадачности, что, в ряде случаев, тоже может быть полезным.

График позволяет:

• Увидеть работу JavaScript-таймера в реальном времени.
• Смоделировать разные условия нагрузки.
• Сравнить работу разных браузеров.
• Даёт информацию к размышлению (некоторые результаты оказались любопытными).

Введение

По горизонтальной оси (X) измеряется количество пройденных циклов. По вертикальной оси (Y) измеряется время в миллисекундах (мс). Начало — по кнопке «СТАРТ». Завершение — происходат автоматически, после визуального заполнения данных по оси X.

Измеряемые значения:

• Красный: промежуток времени от начала одного цикла до начала другого (время полного цикла).
• Белый: промежуток времени от окончания одного цикла до начала другого (время задержки).
• Синий: время видеонагрузки. Видеонагрузкой является графическое отображение этого графика.
• Циан: время псевдонагрузки. Псевдонагрузкой является простое циклическое повторение JavaScript-кода.

Работоспособность проверялась:

• Windows: FF, OPERA, CR, IE.
• Linux: FF, OPERA.

Код на GitHub.
Демо на GitHub (так-же работает с диска).

Типы таймеров

setTimeout

setTimeout используется для разовых задержек исполнения кода и для организации циклов. Цикл на основе setTimeout:

MyFunc = function () {
   
   // прикладной код
     
   setTimeout(function () {
            MyFunc();
       }, 100);
}

Здесь всё, вроде-бы, очевидно: 100 — это задержка в миллисекундах (мс), через которую будет запущен следующий цикл задания. Но, при организации цикла, интуитивно ожидаешь, что код будет выполняться именно с этим периодом. На самом деле (видно на графике), фактическое время цикла будет состоять из времени выполнения кода плюс времени задержки. То есть, чем сложнее код — тем длиннее будет фактическое время цикла.

setInterval

setInterval используется для исполнения кода через определённые промежутки времени. Цикл на основе setInterval:

MyTimer = function () {
    setInterval(function () {
            MyFunc(); // прикладной код
        }, 100);
}

На графике видно, что setInterval контролирует время полного цикла. При изменении времени выполнения кода, «интеллектуально» корректируется время между вызовами так, чтобы время полного цикла оставалось стабильным. Если время выполнения кода, превышает заданный период, то таймер, исчерпав возможности по уменьшению времени между вызовами, начинает вызываться с удлинённым периодом.

requestAnimationFrame

requestAnimationFrame используется для циклической перерисовки экрана, которая синхронизирована с циклами перерисовки браузера. Цикл на основе requestAnimationFrame:

MyFunc = function () {
   
   // прикладной код
     
    requestAnimationFrame(function () {
            MyFunc();
        });
}

setTimeout/setInterval + requestAnimationFrame

Теоретически, гибридные решения должны были совместить возможности точного таймирования и синхронизации отрисовки с циклом обновления экрана. Цикл на основе setTimeout + requestAnimationFrame:

MyFunc = function () {
   
   // прикладной код

    setTimeout(function () {
       requestAnimationFrame(function () {
              MyFunc();
           });
      }, 100);
}

Цикл на основе setInterval + requestAnimationFrame:

MyTimer = function () {
    setInterval(function () {
        requestAnimationFrame(function () {
               MyFunc(); // прикладной код
            });
        }, 100);
}

Функционально код выполняется, но, при этом, наблюдается повышенная нестабильность периодов циклов.

Наблюдения:

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

Видеонагрузка

В качестве видеонагрузки используются функции отрисовки графика на Canvas.

При выборе простой функции (APELSERG.CANVA.Paint), сетка графика отрисовывается один раз, при старте. И, далее, в процессе построения графика, выводится только текущий результат (четыре точки) и счётчик циклов.

При выборе сложной функции (APELSERG.CANVA.PaintComplex), все результаты сохраняются в массивы. Каждый раз при отрисовке, заново обновляется сетка графика и выводятся все сохранённые результаты из всех массивов.

Псевдонагрузка

Псевдонагрузка — это простой цикл на JavaScript, в котором выбирается случайное значение:

APELSERG.MAIN.VirtCalc = function () {
    for (var n = 0; n < APELSERG.CONFIG.SET.TypeVirtCalc ; n++) {
        var q = Math.round(Math.random() * 100);
    }
}

Цикл вынесен в отдельную функцию, чтобы проще можно было подставить другой код. Можно выбрать количество циклов от 0 до 1 000 000 000. Результат тестирования под псевдонагрузкой, в разных браузерах, немного удивил.

Масштабирование и сохранение графика

Чтобы изменить масштаб сетки, надо:

1. Изменить масштаб отображения браузера (Ctrl-, Ctrl+).
2. Перезагрузить страницу.
3. Выбрать размер вывода значения (от 1 до 4 px).

Полученный график можно сохранить как стандартное изображение:

1. Правая кнопка мыши на графике.
2. Сохранить изображение как…

Полезные ссылки

Основной цикл в Javascript
О том, как работают JavaScript таймеры

1. Нажмите «Добавить блок таймер» в нижней части главной страницы в режиме редактирования.
2. Укажите название таймера, установите ссылку на акцию/новость (при необходимости). Задайте время старта и время окончания отсчета. Выберите, в какой части сайта будет располагаться таймер: в левой колонке или в основной части сайта на главной странице (только на шаблоне Универсальный). Выберите один из четырех дизайнов и нажмите «Сохранить».

Также читайте:

• Как найти таймер для акций в шаблоне Презентационный?
• Как подключить авторизацию через ВКонтакте для отзывов?
• Как подключить авторизацию через Facebook для отзывов?
• Как скрыть меню сайта?
• Как создать сайт бесплатно?
• Как зарегистрировать домен бесплатно?

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.

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

Демо таймера обратного отсчёта

Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).

Посмотреть

Подключение и настройка таймера

1. Вставить в нужное место страницы html-разметку таймера:

<div class="timer">
  <div class="timer__items">
    <div class="timer__item timer__days">00</div>
    <div class="timer__item timer__hours">00</div>
    <div class="timer__item timer__minutes">00</div>
    <div class="timer__item timer__seconds">00</div>
  </div>
</div>

Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе <div>. Первый класс (timer__item) используется для стилизации элемента, а второй — для таргетинга в JavaScript.

2. Добавить стили (базовое оформление):

.timer__items {
  display: flex;
  font-size: 48px;
}
.timer__item {
  position: relative;
  min-width: 60px;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 15px;
  text-align: center;
}
.timer__item::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 14px;
}
.timer__item:not(:last-child)::after {
  content: ':';
  position: absolute;
  right: -15px;
}

Стилизовать таймер обратного отсчета можно так как вы этого хотите.

Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.

3. Добавить JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  // конечная дата, например 1 июля 2021
  const deadline = new Date(2021, 06, 01);
  // id таймера
  let timerId = null;
  // склонение числительных
  function declensionNum(num, words) {
    return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
  }
  // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
  function countdownTimer() {
    const diff = deadline - new Date();
    if (diff <= 0) {
      clearInterval(timerId);
    }
    const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
    const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
    const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
    const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
    $days.textContent = days < 10 ? '0' + days : days;
    $hours.textContent = hours < 10 ? '0' + hours : hours;
    $minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
    $seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
    $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
    $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
    $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']);
    $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);
  }
  // получаем элементы, содержащие компоненты даты
  const $days = document.querySelector('.timer__days');
  const $hours = document.querySelector('.timer__hours');
  const $minutes = document.querySelector('.timer__minutes');
  const $seconds = document.querySelector('.timer__seconds');
  // вызываем функцию countdownTimer
  countdownTimer();
  // вызываем функцию countdownTimer каждую секунду
  timerId = setInterval(countdownTimer, 1000);
});

4. Установить дату окончания. Например, до 1 июля 2021:

// конечная дата
const deadline = new Date(2021, 06, 01);

Структура кода JavaScript

Основную часть кода занимает функция countdownTimer:

function countdownTimer() {
  // ...
}

Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.

Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:

// new Date() - текущая дата и время
const diff = deadline - new Date();

Вычисление оставшегося количества дней, часов, минут и секунд выполняется следующим образом:

const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;

Встроенная функция Math.floor используется для округления числа до ближайшего целого (посредством отбрасывания дробной части).

Вывод оставшегося времени на страницу:

$days.textContent = days < 10 ? '0' + days : days;
$hours.textContent = hours < 10 ? '0' + hours : hours;
$minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
$seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
$days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
$hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
$minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']);
$seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);

Переменные $days, $hours, $minutes, $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.

Изменение содержимого элементов выполняется через textContent. Если значение меньше 10, то к нему добавляется символ «0».

Получение элементов (выполняется с помощью querySelector):

// получаем элементы, содержащие компоненты даты
const $days = document.querySelector('.timer__days');
const $hours = document.querySelector('.timer__hours');
const $minutes = document.querySelector('.timer__minutes');
const $seconds = document.querySelector('.timer__seconds');

Функция declensionNum используется для склонения числительных:

// склонение числительных
function declensionNum(num, words) {
  return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}

Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval.

Хранение идентификатора таймера осуществляется в переменной timerId:

// id таймера
let timerId = null;

Использование setInterval для запуска функции countdownTimer каждую секунду:

// вызываем функцию countdownTimer каждую 1 секунду
timerId = setInterval(countdownTimer, 1000);

Остановка таймера по истечении времени выполняется в функции countdownTimer:

function countdownTimer() {
  ...
  if (diff <= 0) {
    // останавливаем таймер timerId
    clearInterval(timerId);
  }
  ...
}

Скрипт для создания нескольких таймеров отчета на странице

Скрипт, написанный с использованием классов, который можно использовать для создания нескольких таймеров отчета на странице:

// класс для создание таймера обратного отсчета
class CountdownTimer {
  constructor(deadline, cbChange, cbComplete) {
    this._deadline = deadline;
    this._cbChange = cbChange;
    this._cbComplete = cbComplete;
    this._timerId = null;
    this._out = {
      days: '', hours: '', minutes: '', seconds: '',
      daysTitle: '', hoursTitle: '', minutesTitle: '', secondsTitle: ''
    };
    this._start();
  }
  static declensionNum(num, words) => {
    return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
  }
  _start() {
    this._calc();
    this._timerId = setInterval(this._calc.bind(this), 1000);
  }
  _calc() {
    const diff = this._deadline - new Date();
    const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
    const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
    const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
    const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
    this._out.days = days < 10 ? '0' + days : days;
    this._out.hours = hours < 10 ? '0' + hours : hours;
    this._out.minutes = minutes < 10 ? '0' + minutes : minutes;
    this._out.seconds = seconds < 10 ? '0' + seconds : seconds;
    this._out.daysTitle = CountdownTimer.declensionNum(days, ['день', 'дня', 'дней']);
    this._out.hoursTitle = CountdownTimer.declensionNum(hours, ['час', 'часа', 'часов']);
    this._out.minutesTitle = CountdownTimer.declensionNum(minutes, ['минута', 'минуты', 'минут']);
    this._out.secondsTitle = CountdownTimer.declensionNum(seconds, ['секунда', 'секунды', 'секунд']);
    this._cbChange ? this._cbChange(this._out) : null;
    if (diff <= 0) {
      clearInterval(this._timerId);
      this._cbComplete ? this._cbComplete() : null;
    }
  }
}

Пример использования класса CountdownTimer() для создания таймера на странице:

// 1. Получим элементы в которые нужно вывести оставшееся количество дней, часов, минут и секунд
const elDays1 = document.querySelector('.timer-1 .timer__days');
const elHours1 = document.querySelector('.timer-1 .timer__hours');
const elMinutes1 = document.querySelector('.timer-1 .timer__minutes');
const elSeconds1 = document.querySelector('.timer-1 .timer__seconds');

// 2. Установим время, например, на одну минуту от текущей даты
const deadline1 = new Date(Date.now() + (60 * 1000 + 999));

// 3. Создадим новый объект, используя new CountdownTimer()
new CountdownTimer(deadline1, (timer) => {
  elDays1.textContent = timer.days;
  elHours1.textContent = timer.hours;
  elMinutes1.textContent = timer.minutes;
  elSeconds1.textContent = timer.seconds;
  elDays1.dataset.title = timer.daysTitle;
  elHours1.dataset.title = timer.hoursTitle;
  elMinutes1.dataset.title = timer.minutesTitle;
  elSeconds1.dataset.title = timer.secondsTitle;
}, () => {
  document.querySelector('.timer-1 .timer__result').textContent = 'Таймер завершился!';
});

В new CountdownTimer() необходимо передать следующие аргументы:

• конечную дату в формате Date;
• функцию, которую нужно выполнять каждую секунду (её, например, можно использовать для обновления содержимого элементов, которые используются для отображения оставшегося времени);
• при необходимости функцию, которую нужно выполнить после завершения таймера.

HTML код первого таймера:

<div class="timer timer-1">
  <div class="timer__items">
    <div class="timer__item timer__days">00</div>
    <div class="timer__item timer__hours">00</div>
    <div class="timer__item timer__minutes">00</div>
    <div class="timer__item timer__seconds">00</div>
  </div>
  <div class="timer__result"></div>
</div>

Инициализация остальных таймеров на странице с помощью new CountdownTimer() выполняется аналогично.

Пример страницы, на которой имеется несколько таймеров обратного отсчёта:

Посмотреть