Как составить отсчет

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

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

Применение таймера обратного отсчета в рассылках

Счетчик может пригодиться практически в любых рассылках. Чаще всего он заметно влияет на конверсию, когда:

• В интернет-магазине заканчивается распродажа. Например, «Успейте купить товары из зимнего ассортимента со скидкой 25% до конца дня». Таймер в данном случае запускается на 24 часа и отображается в письме у всех подписчиков. Пользователи, как правило, начинают быстро изучать весь ассортимент и скупать то, что для них подходит. В этом и есть преимущество таймера – он заставляет принимать решения быстро.
• Заканчивается срок действия промокода. Ситуация аналогична предыдущей: промокод может также использоваться как акционное предложение и подталкивать читателей на совершение целевого действия. Например, «Воспользуйтесь промокодом прямо сейчас и получите скидку 30% на один из товаров для дома».
• Начинается мероприятие. В данном случае можно собрать зрителей для вебинара или иного мероприятия. Счетчик подскажет пользователям, через сколько дней или часов нужно перейти на площадку для просмотра онлайн-записи.
• Истекает срок действия пробного периода. Еще один способ привлечения подписчиков: можно рассказать, через сколько дней или часов закончится пробный период. Таким образом получится сделать напоминание не только для тех, кто об этом забыл, но и убедить другую часть аудитории подписаться на рассылку. Например, пользователь оформил пробный период на онлайн-сервис для просмотра фильмов. После изучения платформы он понял, что это классная площадка, но над оформлением подписки еще не уверен. Через несколько дней ему приходит письмо с таймером обратного отсчета о напоминании продлить пробный период – он видит, что скоро все закончится, и покупает подписку.

Подобных сценариев использования счетчика может быть огромное количество. Все зависит от вашей цели и бизнеса в целом. 

Давайте теперь посмотрим на несколько удачных примеров. Один из них от компании Made – она запускала таймер обратного отсчета для продвижения быстрых распродаж.

Еще одна рассылка со счетчиком, где подписчикам приходило напоминание об окончании распродажи:

А здесь таймер использовался для оповещения о сроках действия промокода:

Также счетчик часто применяют для анонса розыгрышей:

Обратите также внимание, что сами таймеры могут выглядеть совершенно по-разному – здесь все зависит от вашего фирменного стиля и идеи. 

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

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

HTML-таймер

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

С сервисами такие проблемы исключены – данные инструменты используют специальный код для таймера, который защищает его от почтовиков: они не будут распознавать в нем вредоносный объект и удалять из рассылки.

GIF-таймер

Анимированный таймер – это наиболее бюджетный и быстрый способ создать счетчик обратного отсчета. Подобные GIF-элементы можно найти в любой поисковой системе. Например, если ввести запрос «gif таймер» в Google, то отобразится множество различных вариантов:

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

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

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

Если вас устраивает вариант с GIF-анимацией, то вот несколько сервисов, где можно найти подобный таймер:

• GIPHY – одна из самых популярных площадок для поиска GIF, где можно найти тысячи вариантов для рассылки.
• Pinterest – это полноценный фотохостинг, где также можно найти много анимированных объектов.
• Tumblr – площадка микроблогов, включающая в себя множество картинок, статей, видео и GIF-изображений по разным тематикам.

  Читайте также

  

  

Сервисы для создания таймера

Давайте теперь рассмотрим несколько популярных сервисов, которые помогут в установке таймера обратного отсчета в письмах. Работать с ними довольно легко – достаточно настроить дизайн и сгенерировать HTML-код.

Promofeatures

Promofeatures – сервис для создания таймеров, которые можно использовать как в рассылках, так и на сайте. С его помощью вы можете бесплатно сделать счетчик, однако в таком случае он будет выводиться с водяным знаком компании. Чтобы его убрать, необходимо будет оплатить тариф от $6.99 в месяц.

Особенности:

• можно выбрать стиль таймера;
• есть возможность задать цвет дополнительным элементам;
• также можно выбрать шрифт и задать ему стиль: полужирный, курсив и так далее.

Стоимость: бесплатно или от $6.99 в месяц.

Официальная страница: Promofeatures.

Sendtric

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

Особенности:

• нет водяных знаков;
• дата окончания отсчета не должна превышать 30 дней;
• доступно более 20 популярных языков.

Стоимость: бесплатно.

Официальная страница: Sendtric.

Protimer

Protimer – платный русскоязычный сервис для создания таймеров.

Особенности:

• можно создать счетчик с разными вариантами отсчета: до определенной даты, в определенные дни недели на заданное время, с открытия письма, с даты подписки;
• доступно более 10 вариантов дизайна;
• есть функция подстановки изображения после того, как таймер закончит отсчет.

Стоимость: 48 рублей за 1 таймер или 199 рублей в месяц без ограничений.

Официальная страница: Protimer.

Motionmailapp

Последний сервис, о котором мы поговорим, называется Motionmailapp. Это англоязычная платформа, предлагающая 4 варианта дизайна: два с прямоугольными циферблатами и два с круглыми. Создавать счетчики можно бесплатно и в неограниченном количестве, но на них будет размещен водяной знак.

Особенности:

• возможность выбирать стиль таймера;
• можно задать цвет дополнительным элементам;
• кастомизируемые шрифты – разрешается изменять их размер и задавать стиль: жирность, курсив, и так далее.

Стоимость: бесплатно или от $10 в месяц.

Официальная страница: Motionmailapp.

Как установить таймер в Cheapsedner

Теперь давайте рассмотрим, как воспользоваться любым таймером, который был создан с помощью рассмотренных выше инструментов. Для примера возьмем сервис Cheapsender, позволяющий запустить email-рассылку всего за 70 рублей – такой суммы хватит на пакет в 5000 писем. Кроме того, для всех новых пользователей предоставляется бесплатный пакет на 100 писем, с помощью которого можно оценить весь функционал сервиса.

Для добавления таймера в Cheapsedner вам потребуется всего несколько шагов:

1. Проходим регистрацию – для этого открываем официальную страницу и нажимаем «Попробовать бесплатно».
2. После активации личного аккаунта нужно будет создать новый шаблон – сделать это можно в соответствующем разделе «Шаблоны».
3. Вы можете загрузить как собственный HTML-шаблон, так и создать его своими руками в конструкторе. Загрузить таймер обратного отсчета можно в обоих случаях. Для примера давайте откроем конструктор и посмотрим, как устроена работа в нем.
4. Здесь нам нужно добавить новый HTML-блок из правой части экрана.
5. Теперь кликаем по добавленному блоку и в правой части вставляем код созданного таймера. В результате таймер сразу же отобразится в конструкторе:

Вот такими несложными действиями можно добавить любой таймер, созданный с помощью HTML-кода. Если вы хотите загрузить GIF-анимацию, то для этого достаточно выбрать блок «Изображение» и вставить в него элемент.

Выводы

Таймер обратного отсчета – это полноценный маркетинговый инструмент, который способен придавать срочность различным событиям: акциям, онлайн-мероприятиям и прочему. Чтобы добавить его в рассылку, достаточно воспользоваться специальным инструментом, либо написать собственный HTML-код. Полученные данные нужно загрузить в сервис email-рассылок и готово!

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом 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() выполняется аналогично.

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

Посмотреть

Делаем таймер обратного отсчета в гугл таблицах

Если в ожидании нового проекта вам нечем заняться, а под рукой есть только гугл таблицы — можно сделать таймер обратного отсчета, чтобы, например, узнать сколько свободного времени у вас осталось.

Чтобы сделать таймер достаточно воспользоваться парой функций:

ТДАТА(NOW) — выводит текущее дату и время в формате «дата».
РАЗНДАТ (DATEDIF) — подсчитывает количество оставшихся дней, месяцев и лет между двумя датами. По умолчанию учитывается текущий день.
ДНИ (DAYS) — подсчитывает количество дней между двумя датами.
ЧАС (HOUR) — возвращает компонент часа в заданном времени, а также может вычислять разницу часов между двумя датами.
МИНУТЫ (MINUTE) — работает аналогично функции ЧАС, только для минут.

Допустим, мы хотим узнать сколько осталось дней до дня рождения хабра — 26 мая согласно Википедии.

Первоначальные настройки

Чтобы таймер постоянно обновлялся и отображал актуальную информацию необходимо поменять настройки вычисления в таблице.

В открытой таблице выбираем пункт меню «Файл» переходим в «Настройки таблицы» и на вкладке «Вычисления» выбираем «Обновления расчетов» — «При изменениях и каждую минуту».

Формулы для таймера

В примере я сделал таймер двух видов:

для отображения оставшихся дней, часов и минут,
а также
для вывода месяцев, дней, часов и минут.

Единственное отличие — чтобы посчитать количество оставшихся целых месяцев и дней необходимо использовать функцию РАЗНДАТ, тогда как для вывода только количества дней достаточно функции ДНИ.

Также есть функция СЕКУНДЫ (SECOND) которая позволяет выводить секунды, но из-за того что временной диапазон вычисления ограничивается занчением «раз в минуту» — таймер секунд просто не будет успевать обновляться.

Пишем формулы для отсчета времени

В примере используются ячейки:

A2 — конечная дата, от которой ведем отсчет
B2 — текущая дата, вместо нее также можно использовать функцию ТДАТА (NOW).

Месяцы

Количество дней без учета целых месяцев:

Количество дней в целом

Часы

Минуты

В самом простом варианте исполнения — выводим значения таймера в отдельные ячейки:

Используя функцию СЦЕПИТЬ (CONCATENATE) можно все данные вывести в одной ячейке.

Для этого примера формула имеет вид

или для подсчета только дней

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

Файл с примером находится по ссылке.

CSS – мощный инструмент современного разработчика. Он многое умеет, в нём есть переменные, функции, наследование и ещё много крутых штук. Но всё-таки это не язык программирования – у него совсем другая сфера ответственности. Тем интереснее использовать CSS для решения задач программирования 🙂 Именно этим сегодня и займёмся.

Дисклеймер! Многие вещи в принципе невозможно сделать на CSS. Ещё больше вещей делать на CSS нерационально. Мы занимаемся этим только из болезненного любопытства и стремления познать все скрытые возможности инструмента.

Условие задачи

Нужно сделать таймер обратного отсчёта. Предъявляемые требования:

• Таймер должен выводить миллисекунды от 99 до 0.
• Когда остаётся меньше 10 миллисекунд, нужно выводить только одну цифру (от 9 до 0) и центрировать её.
• Бонус #1: Цвет шрифта и фона можно настраивать в процессе работы (без кусочка JS не обойтись).
• Бонус #2. После остановки таймера его можно перезапустить.
• Код должен работать и на ПК, и на мобильных устройствах.

Чтобы выполнить указанные условия, пойдём напролом. Все нужные цифры (от 0 до 9) запишем прямо в базовую разметку страницы. Затем для имитации таймера анимируем их в нужном ритме и правильной последовательности.

Да, не очень элегантно. Но сработает, вот увидите.

Что нам потребуется?

1. CSS трансформации
2. CSS анимации
3. Flexbox-модель
4. CSS переменные
5. Различные селекторы

Вот что получится в итоге:

Реализация на JavaScript

Сразу посмотрим, как это можно было сделать на JS.

Простой и понятный код, состоящий из пары функций. Для обновления таймера подписываемся на момент перерисовки браузера с помощью метода window.requestAnimationFrame().

        let end;
const now = Date.now;
const timer = document.getElementById("timer");
const duration = 9900;

function displayCountdown() {
  const count = parseInt((end - now()) / 100);
  timer.textContent =
    count > 0 ? (window.requestAnimationFrame(displayCountdown), count) : 0;
}

function start() {
  end = now() + duration;
  window.requestAnimationFrame(displayCountdown);
}
    

Всего пара блоков в HTML:

        <div class="timer-container">
  <p class="timer" id="timer">99</p>
</div>
    

И элементарные стили для выравнивания:

        .timer-container {
  display: flex;
  height: 100vh; 
}

.timer {
  margin: auto;
}
    

Согласитесь, ровным счётом ничего интересного. Поэтому бросаем эту ерунду и идём писать по-настоящему крутой таймер.

Общий подход

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

        <div class="timer">
  <div class="digit seconds">
    <span>9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span> 
  </div><div class="digit milliseconds">
    <span>9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span> 
    <span>0</span>
  </div>
</div>
    

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

Большинство CSS-свойств плохо подходят для анимирования, так как их изменение вызывает перерисовку страницы. Но есть два «безопасных» свойства, которыми мы можем воспользоваться: transform и opacity.

Подробнее об анимации в вебе можно прочитать в замечательном руководстве High Performance Animations.

Для оживления таймера возьмём надёжное свойство translateY. Оно обеспечит перемещение блока только по y-оси.

        .selector {
  transform: translateY(0);
}
    

Можно воспользоваться и полным свойством translate, но помните, что его первый аргумент соответствует x-координате. Если хотите перемещать элемент только по вертикали, то передайте первым параметром 0.

        .selector {
  transform: translate(3em);
}

/* то же самое */
.selector {
  transform: translate(3em, 0);
}
    

Чтобы лучше понять функции трансформации, загляните в спецификацию CSS Transforms Module Level 1. Там всё разобрано на подробных примерах, так что вы разберётесь, даже если не очень любите математику.

CSS animations

Следующий шаг – анимировать применение трансформаций. Для этого мы используем CSS-анимации.

Самое важное правило, которое вы должны знать, – это @keyframes. Оно позволяет разбить анимацию на кадры и описать каждый из них в отдельности.

        @keyframes seconds {
  0% { transform: translateY(0) }
  10% { transform: translateY(-1em) }
  20% { transform: translateY(-2em) }
  30% { transform: translateY(-3em) }
  40% { transform: translateY(-4em) }
  50% { transform: translateY(-5em) }
  60% { transform: translateY(-6em) }
  70% { transform: translateY(-7em) }
  80% { transform: translateY(-8em) }
  90% { 
    transform: translateY(-10em);
    width: 0;
  }
  100% { 
    transform: translateY(-10em);
    width: 0;
  }
}

@keyframes milliseconds {
  0% {transform: translateY(0) }
  10% { transform: translateY(-1em) }
  20% { transform: translateY(-2em) }
  30% { transform: translateY(-3em) }
  40% { transform: translateY(-4em) }
  50% { transform: translateY(-5em) }
  60% { transform: translateY(-6em) }
  70% { transform: translateY(-7em) }
  80% { transform: translateY(-8em) }
  90% { transform: translateY(-9em) }
  100% { transform: translateY(-9em) }
}
    

Здесь мы создали две анимации – по одной для каждого блока с цифрами.

Обратите внимание на два последних кадра в анимации первого блока. В этот момент там должна отображаться цифра 0, но она нам не нужна, поэтому скрываем её с помощью width: 0.

Чтобы применить анимации, используем краткий синтаксис свойства animation:

        .seconds {
  animation: seconds 10s 1 step-end forwards;
}

.milliseconds {
  animation: milliseconds 1s 10 step-end forwards;
}
    

Если вы зайдете в панель инструментов разработчика и откроете вкладку с вычисленными значениями (computed), то увидите, что вместо одного свойства animation к элементу применились сразу несколько:

animation-name

Имя анимации, использующееся для её идентификации. Для него можно использовать латинские буквы, цифры, нижнее подчёркивание и дефисы. Первой должна идти буква. В начале не могут стоять зарезервированные слова none, unset, initial или inherit, а также сочетание --. Регистр символов имеет значение.

animation-duration

Продолжительность одного цикла анимации. Для первой колонки цифр анимация будет длиться 10 секунд (10s). Вторая колонка двигается в 10 раз быстрее (1s).

animation-iteration-count

Количество циклов анимации, которое должно выполниться до ее остановки. Первую колонку нужно прокрутить лишь один раз – от 9 до 0. Вторую – целых 10 раз, по одному на каждое положение первой колонки.

animation-timing-function

Это свойство описывает прогресс анимации в течение одного цикла. Если вы знакомы с кривыми Безье, то можете контролировать его до мельчайших подробностей с помощью функции cubic-bezier(). Для простых смертных есть несколько готовых значений animation-timing-function, обозначенных ключевыми словами (ease, ease-in и т.д)

Нам же больше подойдёт значение step-end. Это то же самое, что и steps(1, jump-end).

Функция steps() разбивает анимацию на равные «шаги», то есть величина изменяется не плавно, а прерывисто. Первый аргумент – количество шагов, второй – момент, когда начинается анимация. Ключевое слово jump-end означает, что анимация запускается в конце, а не начале каждого шага.

Чтобы лучше разобраться в этой функции, обратитесь к статье Дэна Уилсона Jumps: The New Steps() in Web Animation.

animation-fill-mode

Состояние целевого объекта до и после завершения анимации. Нам требуется, чтобы колонки останавливались на последней цифре (последний ключевой кадр), поэтому используем значение forwards.

Когда анимация остановится, первая цифра будет скрыта, а вторая колонка замрёт на позиции -9em.

Ещё больше о CSS анимациях вы можете узнать в спецификации CSS Animations Level 1.

Flexbox

Цифру 0 в первом разряде мы уже скрыли с помощью инструкции @keyframes, осталось только выровнять таймер по центру страницы:

        .timer-container {
  display: flex;
  height: 100vh; 
}

.timer {
  overflow: hidden;
  margin: auto;
  height: 1em;
  width: 2ch;
  text-align: center;
}

.digit {
  display: inline-block;
}

.digit span {
  display: block;
  width: 100%;
  height: 1em;
}
    

Для вертикального выравнивания используем автоматический расчёт маргинов у потомка флекс-контейнера. Другими словами, назначаем display: flex родительскому блоку, и margin: auto дочернему.

Горизонтальное выравнивание достигается обычным text-align: center.

Больше информации о Flex-модели – в спецификации CSS Flexible Box Layout Module Level 1.

Бонус #1: Динамическое изменение цвета

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

Используем для ее решения кастомные свойства CSS и инпут выбора цвета.

Положим цвета в переменные:

        :root {
  --fontColour: #000000;
  --bgColour: #ffffff;
}
    

И используем их в таймере:

        .timer {
  background-color: var(--bgColour, white);
}

.digit {
  color: var(--fontColour, black);
}
    

Добавим на страницу два инпута для изменения цветовой схемы:

        <aside>
  <label>
    <span>Font colour:</span>
    <input id="fontColour" type="color" value="#000000" />
  </label>
  <label>
    <span>Background colour:</span>
    <input id="bgColour" type="color" value="#ffffff" />
  </label>
</aside>
    

Теперь придётся написать пару строк JS-кода, чтобы динамически изменять переменные цветов при изменении инпутов:

        let root = document.documentElement;
const fontColourInput = document.getElementById('fontColour');
const bgColorInput = document.getElementById('bgColour');

fontColourInput.addEventListener('input', updateFontColour, false);
bgColorInput.addEventListener('input', updateBgColour, false);

function updateFontColour(event) {
  root.style.setProperty('--fontColour', event.target.value);
}

function updateBgColour(event) {
  root.style.setProperty('--bgColour', event.target.value);
}
    

Да, не всё можно решить на чистом CSS.

Бонус #2: Перезапуск таймера

Сейчас таймер отрабатывает только один раз. Чтобы запустить его сначала, необходимо перезагрузить страницу. Давайте добавим возможность перезапуска.

Возможно, вы подумали, что нам придётся снова смошенничать и добавить JavaScript? А вот и нет, мы справимся своими силами!

Воспользуемся чекбоксом, который обладает состоянием checked. Мы легко можем получить к нему доступ из CSS.

        .toggle span {
  font-size: 1.2em;
  padding: 0.5em;
  background-color: palegreen;
  cursor: pointer;
  border-radius: 4px;
}

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

 input[type="checkbox"]:checked ~ aside .toggle span:first-of-type {
  display: none;
}

.toggle span:nth-of-type(2) {
  display: none;
}

input[type="checkbox"]:checked ~ aside .toggle span:nth-of-type(2) {
  display: inline;
}
    

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

        input[type="checkbox"]:checked ~ .timer .seconds {
  animation: seconds 10s 1 step-end forwards;
}

input[type="checkbox"]:checked ~ .timer .milliseconds {
  animation: milliseconds 1s 10 step-end forwards;
}
    

Важно, чтобы чекбокс находился на одном уровне с таймером и стоял в разметке перед ним. Это даст нам возможность воспользоваться селектором “сиблингов” (~). А лейбл для него может находиться где угодно.

***

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

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

Если вы любите CSS, вот ещё кое-что:

• Большая подборка лучших ресурсов для изучения CSS
• My heart will beat on! Сердце на CSS для неисправимых романтиков
• Верстать быстро и красиво: 15 популярных CSS фреймворков

В комментариях делитесь самыми нестандартными решениями ваших задач.