Как изменить счетчик времени на сайте

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

Основную часть кода занимает функция 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() выполняется аналогично.

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

Посмотреть

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

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

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

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

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

Основа страницы

Возьмём стандартный шаблон страницы:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

Теперь поработаем со служебным разделом <head>..</head> и наполним его нужными командами:

<!-- Это название страницы, выводится в табе браузера-->
<title>Интервальный таймер</title>
<!-- это служебная информация для браузера, пока можно не вникать -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Подключаем там же фреймворк jQuery, который упростит нам работу с таймером и его компонентами:

<!-- подключаем фреймворк jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

Теперь разместим все элементы интерфейса на странице. Начнём с общего блока, где будет наш таймер:

<div class="app_form_block app_main app_timer ">
<!-- внутри этого блока мы и будем размещать все элементы -->
</div>

Теперь будем размещать внутри этого блока интерфейс программы. Сразу подключим звуковые уведомления, за них отвечает тег <audio>

<!-- подключаем звуковые уведомления -->
   <audio id="audio_beep">
      <source src="s.mp3" type="audio/mp3" >
   </audio>

Звук мы взяли где-то из интернета и положили в ту же папку, что и наша программа.

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

<!-- делаем форму на сайте, где будем выводить наши элементы -->
<form name="timer_form" id="timer_form">
  <!-- тут будут наш таймер и блок с настройками -->
</form>

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

<!-- пишем специальный заголовок страницы -->
<div class="block_row timer_types ">
  <span class="timer_types_btn active" id="Secret">Интервальный таймер
  </span>
</div>

Тег <span> — это контейнер, как бы прозрачная обёртка для своего содержимого. С его помощью мы можем отдельно настроить внешний вид и поведение нашего текста. Теперь у нашего заголовка есть внутреннее имя "Secret" и класс "timer_types_btn", который пока ещё нигде не прописан.

На этом этапе у нас будет пустая страница с надписью «Интервальный таймер». Пока что ничего интересного.

Интерфейс

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

<div class="block_row  app_console">
  <!-- основной блок со всеми цифрами -->
</div>

Первое, что мы в него добавим — интерфейс настроек тренировки, где можно будет выбрать время и количество повторений. Сначала добавим в него настройку времени на упражнения:

<!-- блок, который отвечает за время тренировки -->
<span class="timer_interval_work">
  <!-- по умолчанию ставим время одного подхода 00 минут… -->
  <span class="timer_interval_nums minutes green" contenteditable="true">00
  </span>
  <!-- разделитель — двоеточие -->
  <span class="timer_sep">:
  </span>
  <!-- …и 25 секунд -->
  <span class="timer_interval_nums seconds green" contenteditable="true">25
  </span>
</span>

Внутри этого блока у нас три раздела: один отвечает за минуты, второй — за двоеточие, третий — за секунды. Свойство contenteditable="true" означает, что этот контент можно изменять, щёлкая мышкой и вводя свои значения.

Так же добавим блоки количества подходов и времени отдыха:

<!-- блок, который отвечает за количество подходов -->
<span class="timer_interval_count">
  <!-- какой сейчас идёт подход -->
  <span class="timer_interval_nums times">1
  </span>
  <!-- разделитель — косая черта -->
  <span class="timer_sep">/
  </span>
  <!-- и сколько подходов у нас всего -->
  <span class="timer_interval_nums all_times" contenteditable="true">10
  </span>
</span>
<!-- блок, который отвечает за время отдыха -->
<span class="timer_interval_rest">
  <!-- по умолчанию ставим время отдыха 0 минут… -->
  <span class="timer_interval_nums minutes red" contenteditable="true">00
  </span>
  <!-- разделитель — двоеточие -->
  <span class="timer_sep">:
  </span>
  <!-- …и 5 секунд -->
  <span class="timer_interval_nums seconds red" contenteditable="true">5
  </span>
</span>

Вставляем это всё в нашу панель настроек и смотрим, что получилось:

Табло для отсчёта времени и кнопки

Для большого табло используем тот же код, что и для панели настроек, только применим потом другой класс оформления:

<!-- большая цифровая панель -->
<div class="timer_panel_nums">
  <!-- минуты… -->
  <span class="timer_nums minutes">00</span>
  <span>:</span>
  <!-- …и секунды -->
  <span class="timer_nums seconds">00</span>
</div>

Кнопки сделаем с помощью стандартного тега <input>. Каждой кнопке присвоим своё имя и идентификатор, чтобы можно было с ними работать из скрипта:

<!-- блок кнопок -->
<div class="block_row">
  <!-- Кнопка «Сброс» -->
  <input value="Сброс" name="timer_clear" id="timer_clear" class="timer_btn" type="button" />
  <!-- Кнопка «Старт» -->
  <input value="Старт" name="timer_run" id="timer_run" class="timer_btn run" type="button" />
  <!-- Кнопка «Пауза», в самом начале она скрыта -->
  <input value="Пауза" name="timer_pause" id="timer_pause" class="timer_btn pause hide" type="button" />
  <!-- закончился блок кнопок -->
</div>

Вот наш интерфейс. Ставим его в форму на странице и смотрим на результат:

Настраиваем внешний вид

Очевидно, что таймер наш выглядит скромновато. Нужно его оформить. Для этого используем CSS — стили оформления элементов на странице.

Как вы помните, CSS-стили можно выносить в отдельный файл, а можно писать в разделе <head> с помощью тега <script>. Выберем второй способ и определим все стили прямо в этом же документе:

body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/*настраиваем отступы в полях ввода цифр, там, где задаётся время тренировки, отдыха, и количество повторов*/
.app_form_block input[type="number"] {
  padding: 4px 4px;
}
/*задаём отступы у элементов*/
.app_main .block_row {
  padding: 1em 0.5em;
}
/*устанавливаем размер цифр для количества повторов, времени тренировки и отдыха */
.app_timer .app_console .timer_panel_info {
  font-size: 1.6em;
  line-height: 1.2em;
  letter-spacing: 0;
}
/*зелёный цвет*/
.green {
  color: #bff08e;
}
/*красный цвет*/
.red {
  color: #e56655;
}
/*задаём размер таймера*/
.app_timer .app_console .timer_panel_nums {
  font-size: 4.8em;
  line-height: 1.2em;
  margin-top: 50px;
}
/*учим браузер скрывать временно ненужные кнопки*/
.app_timer .timer_btn.hide,
.app_timer .timer_nums.hide,
.app_timer .timer_sep.hide {
  display: none;
}
/*задаём размер кнопок*/
.app_timer .timer_btn {
  border-color: #777;
  color: #777;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.8em;
  padding: 8px 12px;
  margin: 0 2px;
  min-width: 180px;
}
/*настраиваем, как изменится цвет кнопки, если провести по ней мышкой*/
.app_timer .timer_btn:hover {
  background-color: #777;
  color: #fff;
}
/*задаём размер кнопок*/
.app_timer .timer_btn.run,
.app_timer .timer_btn.pause {
  border-color: #5594e5;
  color: #5594e5;
  font-weight: 600;
}
/*настраиваем, как изменится цвет АКТИВНОЙ кнопки, если провести по ней мышкой*/
.app_timer .timer_btn.run:hover,
.app_timer .timer_btn.pause:hover {
  background-color: #5594e5;
  color: #fff;
}

Сохраняем код, обновляем страницу в браузере:

Класс! Время тренировки у нас выделено зелёным цветом, отдыха — красным. Благодаря этому мы не перепутаем числа. А ещё появилось большое табло отсчёта времени и две кнопки вместо трёх — «Пауза» автоматически исчезла после загрузки.

Собираем скрипт

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

<!-- подключаем наш код, который отвечает за правильную работу таймера -->
<script type="text/javascript" src="interval_timer_script.js" defer></script>

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

Мы назвали наш скрипт interval_timer_script.js, но название у него может быть каким угодно, лишь бы из английских букв, цифр и без пробелов. Расширение .js должно остаться таким же в любом случае. Меняете имя файла — не забудьте прописать его название в src="….js", чтобы страница знала, как называется нужный скрипт.

Теперь наполним наш скрипт. Начнём с переменных:

// переменная, которая отслеживает, сколько секунд прошло
var now_seconds = 0;
// var now_times = 0;
// тренировка начинается с отсчёта рабочего времени, сразу ставим этот режим
var interval_type = 'work';
// переменная для отсчёта интервалов
var intervalVariable;
// переменная, которая следит за количеством секунд в таймерах
var seconds_1 = 0;
// ставим начальные значения счётчиков минут и секунд
var timer_minutes = 0;
var timer_seconds = 0;

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

// подготовка звукового оповещения
function audio_change() {
  // находим аудиоэлемент на странице
  var audio = $('#audio_beep');
  // подключаем нужный файл со звуком. Файлов два, потому что разные браузеры играют разные форматы
  $('#audio_beep source[type="audio/ogg"]').attr('src', 's.ogg');
  $('#audio_beep source[type="audio/mp3"]').attr('src', 's.mp3');
  // ставим звук на паузу и подгружаем его
  audio[0].pause();
  audio[0].load();
}

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

// разбиваем секунды на часы, минуты и секунды
function secondsToTime(seconds) {
  var h = parseInt(seconds / 3600 % 24);
  var m = parseInt(seconds / 60 % 60);
  var s = parseInt(seconds % 60);
  return { 'hours': leadZero(parseInt(h)), 'minutes': leadZero(parseInt(m)), 'seconds': leadZero(parseInt(s)) };
}

Ну и добавим эстетики в программу — для красоты будем ставить первым ноль, если число минут или секунд меньше девяти:

function leadZero(num) {
  var s = "" + num;
  if (s.length < 2) {
    s = "0" + s;
  }
  return s;
}

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

// отображение времени на табло
function renderTimerNums(seconds) {
  var timer_nums = secondsToTime(seconds)
  $('.timer_nums.minutes').text(timer_nums.minutes);
  $('.timer_nums.seconds').text(timer_nums.seconds);
}

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

// функция, которая отвечает за смену времени на таймере
function timerTick(type, timer_params) {
  // увеличиваем количество прошедших секунд на единицу
  now_seconds++;
  // если идёт время тренировки
  if (interval_type == 'work') {
    // и ещё осталось время на тренировку
    if (timer_params.time_work - now_seconds > 0) {
      // показываем, сколько осталось времени
      renderTimerNums(timer_params.time_work - now_seconds);
    }
    // иначе, если тренировка закончилась
    else {
      // обнуляем табло
      renderTimerNums(0);
      // проигрываем звук уведомления
      $('#audio_beep')[0].play();
      // обнуляем секунды тренировки
      now_seconds = 0;
      // ставим режим «Отдых»
      interval_type = 'rest';
      // меняем цвет цифр на таймере
      $('.timer_panel_nums .timer_nums').removeClass('green');
      $('.timer_panel_nums .timer_nums').addClass('red');
    }
  }
  // если началось время отдыха
  else if (interval_type == 'rest') {
    // и оно ещё не закончилось
    if (timer_params.time_rest - now_seconds > 0) {
      // показываем оставшееся время
      renderTimerNums(timer_params.time_rest - now_seconds);
    }
    // а если всё-таки время отдыха закончилось
    else {
      // обнуляем табло
      renderTimerNums(0);
      // проигрываем звук уведомления
      $('#audio_beep')[0].play();
      // обнуляем секунды
      now_seconds = 0;
      // увеличиваем счётчик повторов на единицу
      now_times++;
      // если мы выполнили все повторы
      if (now_times > timer_params.interval_count) {
        // обновляем информацию на панели настроек
        $('.timer_interval_nums.times').text(timer_params.interval_count);
        $('#timer_pause').trigger('click');
        now_seconds = 0;
        $('.timer_panel_nums .timer_nums').removeClass('red');
      }
      // иначе, если количество пройденных повторов меньше, чем было задано
      else {
        // обновляем информацию на панели настроек
        $('.timer_interval_nums.times').text(now_times);
        $('.timer_panel_nums .timer_nums').removeClass('red');
        $('.timer_panel_nums .timer_nums').addClass('green');
      }
      // ставим после отдыха снова режим тренировки
      interval_type = 'work';
    }
  }
}

Продолжение скрипта: обрабатываем нажатия на кнопки

Начнём с кнопки «Старт». Логика работы такая: следим за тем, в каком режиме работает таймер, не забывая скрывать «Старт» и показывать «Паузу» после запуска. Как только перешли к отдыху или снова к тренировке — включаем звуковой сигнал. Если все тренировки прошли, но мы снова нажали «Старт», начнём всё сначала:

// обрабатываем нажатие на кнопку «Старт»
$('#timer_run').click(function () {
  // настраиваем аудио
  audio_change();
  // делаем кнопку «Старт» невидимой
  $(this).addClass('hide');
  // а кнопку «Пауза», наоборот, видимой
  $('#timer_pause').removeClass('hide');
  // записываем установленные минуты и секунды
  timer_minutes = $('.timer_nums.minutes').text();
  timer_seconds = $('.timer_nums.seconds').text();
  // переменная, которая будет хранить параметры интервального цикла
  var timer_params = {};
  // запускаем звуковое оповещение
  $('#audio_beep')[0].play();
  // устанавливаем размер тренировки...
  timer_params.time_work = $('.timer_interval_work .minutes').text() * 60 + $('.timer_interval_work .seconds').text() * 1;
  // ...отдыха,
  timer_params.time_rest = $('.timer_interval_rest .minutes').text() * 60 + $('.timer_interval_rest .seconds').text() * 1;
  // ...и количество повторений
  timer_params.interval_count = $('.timer_interval_count .all_times').text() * 1;
  // обновляем информацию о том, сколько подходов уже сделано
  now_times = $('.timer_interval_count .times').text() * 1;
  // если все тренировки прошли — начнём сначала
  if (now_times >= timer_params.interval_count) {
    now_times = 1;
    $('.timer_interval_count .times').text(now_times);
  }
  // если сейчас режим тренировки, то делаем табло зелёным и запоминаем количество секунд
  if (interval_type == 'work') {
    $('.timer_panel_nums .timer_nums').addClass('green');
    seconds_1 = timer_params.time_work;
  }
  // если сейчас режим отдыха, то делаем табло красным и запоминаем количество секунд
  else if (interval_type = 'rest') {
    $('.timer_panel_nums .timer_nums').addClass('red');
    seconds_1 = timer_params.time_rest;
  }
  // задаём интервал обновления — одна секунда
  intervalVariable = setInterval(timerTick, 1000, 'interval', timer_params);
  // выходим из функции
  return false;
});

Теперь очередь кнопки «Пауза». Она появляется в тот момент, когда мы нажимаем на кнопку «Старт», которая сразу исчезает. Логика чуть другая: при каждом нажатии мы просто останавливаем интервал и тоже включаем звук, чтобы обозначить смену режима:

// что будет, если мы нажмём на кнопку «Пауза»
$('#timer_pause').click(function (event, params) {
  // если кнопка сработала нормально
  if (params !== undefined) {
    // но аудиопараметры ещё не задавались
    if (params.audio === undefined) {
      // задаём параметры оповещения
      params.audio = 1;
    }
  }
  // иначе сразу задаём параметры звука
  else {
    params = { audio: 1 };
  }
  // после нажатия на кнопку «Пауза» делаем её невидимой
  $(this).addClass('hide');
  // а кнопку «Старт» — наоборот, видимой
  $('#timer_run').removeClass('hide');
  // останавливаем таймер
  clearInterval(intervalVariable);
  // если со звуком всё в порядке
  if (params.audio) {
    // проигрываем звуковое оповещение
    $('#audio_beep')[0].play();
  }
  // выходим из функции
  return false;
});

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

// что будет, если нажмём на кнопку «Сброс»
$('#timer_clear').click(function () {
  // имитируем нажатие на кнопку «Пауза», чтобы остановить таймер
  $('#timer_pause').trigger('click', { audio: 0 });
  // ставим режим тренировки
  interval_type = 'work';
  // убираем красный цвет на табло, которое там осталось от включения паузы
  $('.timer_panel_nums .timer_nums').removeClass('green red');
  // обнуляем табло
  renderTimerNums(0);
  // обнуляем значения служебных переменных
  now_seconds = 0;
  now_times = 0;
  // задаём начальное значение первого блока секунд
  seconds_1 = 25;
  // устанавливаем начальные значения времени тренировки, отдыха и количества повторов
  $('.timer_interval_work .minutes').text('00');
  $('.timer_interval_work .seconds').text('25');
  $('.timer_interval_rest .minutes').text('00');
  $('.timer_interval_rest .seconds').text('05');
  $('.timer_interval_count .times').text('1');
  $('.timer_interval_count .all_times').text('10');
  // выходим из функции
  return false;
});

Теперь собираем скрипт в один файл, сохраняем, обновляем нашу страницу и нажимаем на «Старт». Всё, успех — таймер начал отсчёт:

Если у вас не получилось всё правильно собрать в один файл и запустить — ничего страшного. Мы сами уже сделали это за вас и упаковали все нужные файлы в один архив. Вам нужно его скачать, распаковать и запустить файл int.html.

• Главная»
• Уроки»

• PHP»
• Как создать страницу с обратным отсчетом времени с помощью PHP и jQuery

• Метки урока:
• sql
• mysql
• регистрация
• контактная форма
• php
• jquery

<script type="text/javascript" src="js/countdown.js"></script>

<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>

new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")

new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")

.count_down{...}
.count_down sup{...}

<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>

<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>

<div id="update_success">E-mail added!</div>

<script type="text/javascript">
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>

<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php'); 
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);

$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>

5 последних уроков рубрики «PHP»

• 

  Фильтрация данных с помощью zend-filter

  Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

• 

  Контекстное экранирование с помощью zend-escaper

  Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

• 

  Подключение Zend модулей к Expressive

  Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

• 

  Совет: отправка информации в Google Analytics через API

  Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

• 

  Подборка PHP песочниц

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

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

Логику скрипта мы напишем на языке Javascript, с использованием библиотеки jQuery. А визуальное оформление создадим с помощью обычного HTML. Для тех, кто не знает, библиотека jQuery – это библиотека, написанная на языке Javascript. Если сказать другими словами, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML.. Эта библиотека предоставляет нам очень большой выбор различных функций и методов по доступу к атрибутам и содержимому выбранных элементов. Итак, давайте приступим.

1. Создание HTML разметки.

Первым делом создадим визуальную часть нашего скрипта, то есть разметку на основе HTML. Для этого создадим новый файл под названием index.html. Вот с таким содержимым:

Как Вы видите имеется общий контейнер с идентификатором id=»timer_wrap», в котором будет расположен наш таймер. В нем содержится вспомогательный контейнер с идентификатором id=»clock», который служит для более красивого отображения таймера. Далее обратите внимание, что в контейнерах с идентификаторами id=’day’, id=’hour, ‘id=’min’, id=’sec’ будут содержатся — дни, часы, минуты и секунды соответственно. Между этими контейнерами вставлены блоки с идентификаторами id=»razd», которые служат разделителями для каждого элемента таймера (как обычно разделитель для времени — это символ «:»). Так как каждый элемент времени таймера (секунды, минуты, часы, дни) выводится в двузначном формате, то для более красивого отображения времени я предусмотрел для каждого разряда времени свой блок. К примеру, для отображения секунд предусмотрен блок с идентификатором id=’sec’ и для каждого разряда предусмотрен свой блок: для единиц — блок id=’sec1′, для десятков — id=’sec0′. Остальные элементы времени по аналогии.

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

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

Теперь нам осталось создать сам таймер и вывести на экран.

2. Подготовка к кодированию на Javascript.

Первым делом давайте создадим пустой файл script.js, в котором будут храниться скрипты на языке Javascript, и сохраним его в папке js. Далее давайте подключим этот файл к нашему скрипту (между тегами head):

Далее нам понадобится библиотека jQuery, которую можно скачать с официального сайта //jquery.com кликнув по кнопочке DOWNLOAD. После скачивания библиотеки также ее сохраним в папке js и подключим к нашему скрипту:

3. Создаем логику таймера.

Итак, для начала перейдем в файл script.js и откроем код для работы с библиотекой jQuery:

Как Вы помните, для того что бы начать работу с библиотекой jQuery, необходимо выбрать элемент document нашей страницы, и для него вызвать обработчик события ready (который сработает после полной загрузки страницы), и в этом обработчике описываем функцию в теле которой и ведем кодирование с использованием библиотеки jQuery.

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

Итак, давайте создадим функцию get_timer() которая и будет функцией вызова таймера. Далее в этой функции создадим переменную date_new, в которой будем хранить дату от которой нужно вести обратный отсчет. Дата будет представлять собой строку формата:

Месяц День,Год ЧЧ:ММ

К примеру, если мы хотим назначить датой отсчета 1 июля 2012 года и время 12.00, то строку необходимо сформировать таким образом:

July 1,2012 12:00

Теперь давайте приведу часть кода функции для дальнейших пояснений:

Обратите внимание, далее создаем объект класса Date (записываем его в переменную date_t) и передаем его конструктору — дату отсчета времени. Класс Date предназначен для работы с датами и временем. Если конструктору, не передавать ни каких значений, то будет создан объект класса Date с текущими датой и временем. Которую, мы можем вывести, если нам это необходимо. Дата и время в объекте Date, хранятся не в явном виде, а в виде количества миллисекунд прошедших с 0 часов 0 минут 1 января 1970 года. Поэтому мы можем узнать, сколько пройдет миллисекунд между временем отсчета и текущей датой, что мы и делаем и сохраняем результат в переменную timer.

То есть в переменной timer у нас содержится количество миллисекунд до времени отсчета. Значит, нам осталось только узнать, сколько это будет дней, часов, минут и секунд, а затем просто вывести это на экран. Первым делом переведем миллисекунды в привычное для нас время (продолжаем кодировать функцию get_timer()):

Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной date_t больше чем в переменной – date, значит необходимо продолжать отсчет. Если же меньше – то мы с помощью jQuery производим выборку блока с идентификатором clock ($(«#clock»)) и при помощи метода html() вставляем в выбранный блок данные, которые переданы ему параметром (метод html() выводит данные, которые переданы ему параметром, в выбранный блок).

Первым делом найдем количество дней до даты отсчета. Для этого переменную таймер делим на количество миллисекунд в одном дне, а это можно узнать из выражения – 24*60*60*1000 (в одной секунде 1000 миллисекунд, в одной минуте 60 секунд, в одном часе 60 минут и в одном дне 24 часа). С помощью функции parseInt() мы отбрасываем у результата дробную часть, так как эта функция, приводит строку, переданную ей параметром, к целочисленному результату (попросту говоря, возвращает число, а если это невозможно, то NaN). Далее если получившееся число меньше 10 – добавляем 0, так как каждый элемент времени нужно выводить в двузначном формате. И затем с помощью метода toString() приводим получившийся результат (переменную day), к строковому типу данных (это нам понадобится для более красивого отображения времени, но об этом позже). Как видите здесь все просто – немного математики и все.

Далее часы определяем по аналогии с днями, только переменную делим уже на количество миллисекунд в одном часе. Но теперь необходимо отбросить дни, так как мы сейчас получили общее количество часов до указанной даты отсчета. Для этого мы с помощью операции – остаток от деления отбрасываем дни. Для обозначения этой операции используется символ — % и возвращает эта операция — остаток от деления левого операнда на правый операнд. То есть мы как бы делим общее число получившихся часов на 24 (количество часов в одном дне) и берем от результата только остаток от деления – так как целая часть от деления – это уже дни, а мы их уже получили.

Затем находим минуты – все по аналогии. Переменную таймер делим на количество миллисекунд в одной минуте и отбрасываем часы (как и в примере выше – берем остаток от деления общего количества минут на 60 – количество минут в одном часе).

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

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

Затем после кода функции вызовем ее на исполнение:

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

4. Выводим таймер на экран.

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

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

Обратите внимание, в самом конце кода функции, я вызываю функцию setTimeout(), с помощью которой, вызывается наша создаваемая функция через одну секунду (она вызывается ровно один раз). То есть мы один раз функцию вызываем сами, а последующие разы, она вызывает себя сама с интервалом в одну секунду.

Теперь так как переменные day, hour, min и sec у нас имеют строковый тип данных, то мы можем обращаться к любому символу этих переменных используя индексы — их номера в строке. К примеру если в переменной day у нас записана строка 10, то 1 — это символ с индексом 0, а 0 — с индексом 1, значит для вывода первого символа этой переменной можно написать вот так day[0].

Далее (пояснения веду с конца кода функции) выводим на экран единицы секунд (как я и говорил секунды выводятся в двузначном формате — первое число это десятки, второе — единицы) . Для вывода используем функцию animation() (код которой я приведу ниже), которая используется для анимированного вывода элементов таймера. То есть единицы секунд у нас выводятся всегда с анимацией, так как они изменяются каждую секунду. Далее, десятки секунд нужно выводить с анимацией только тогда, когда единицы секунд равны 9 (sec[1] == 9), так как в этом случае десятки изменят свое значение. В противном случае десятки должны быть неподвижны. Значит если sec[1] == 9, то мы выводим десятки секунд при помощи функции animation($(«#sec0»),sec[0]), если же нет, то мы выводим десятки попросту используя метод html() ($(«#sec0»).html(sec[0]);).

Далее единицы минут, нужно выводить с анимацией только тогда, когда десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9). Затем десятки минут также необходимо выводить с анимацией лишь тогда, когда единицы минут равны 9 (min[1] == 9 ) и десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9).

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

Теперь приведу код функции, которая выводит на экран элементы таймера при помощи анимации:

Первым делом обратите внимание на параметры, которые необходимо передавать этой функции. Первый параметр — это обычная выборка jQuery, к примеру $(«#min0»). Второй параметр — это данные, которые мы вставляем в выбранный блок (а выборка у нас передается в переменную vibor). Затем мы пишем выборку (сохраненную в переменной vibor), далее вызываем метод html() – которому передаем параметром переменную param (а в ней сохранены данные для вставки). Затем вызываем метод css() с помощью которого задаем стили для нашей выборки. То есть мы немного поднимаем выбранный блок вверх, при помощи правила marginTop (обратите внимание как в этом методе записываются правила состоящие из двух слов), со значением в -20px и задаем полную прозрачность выбранного блока, то есть как бы скрываем данный блок. Далее вызываем метод animate(), который дает возможность нам, создавать пользовательскую анимацию опираясь на правила css, которые мы ему передаем. К примеру, если у блока ширина 100px и методу animate() мы передаем правило для ширины равное 300px. То на экране мы увидим плавное увеличение ширины блока до 300px.

Методу animate() мы передаем правила css, которые будут опускать выборку на свое обычное местоположение, а также убирать прозрачность в блоке с выборкой.

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

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

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

Если возникнут вопросы — пишите, постараемся на них ответить. Всего доброго! Удачного Вам кодирования и до новых встреч!!!

Устанавливаем таймер обратного отсчета времени

30 07 2015     
     
18 комментариев

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

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

Почему именно этот сервис так привлек мое внимание?

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

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

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

Итак, давайте приступим. Для начала зайдем на MegaTimer.

Вот ссылочка: MegaTimer.ru

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

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

Чуть ниже отображаются вкладки-шаги настройки таймера. Можно выбрать его тип, далее дизайн, дополнительные параметры и получить код в завершении. Чтобы переключаться между вкладками можно либо нажимать левой кнопкой мыши на нужную вкладку, либо нажать кнопку «Следующий шаг» внизу страницы.

На первом шаге выбираем тип таймера из нескольких вариантов:

1. до определенной даты, здесь же выставляем конец отсчета

1. на промежуток времени, выбрав начало отсчета либо с момента первого посещения клиентом вашего сайта или прямо сейчас, чтобы отсчет пошел именно с момента открытия странички

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

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

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

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

После установки всех параметров переходим в заключительную вкладку «Получить код». Теперь вам достаточно выделить строчку с сгенерированным кодом и скопировать ее, нажав правую кнопку мыши и выбрав команду «копировать».

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

После небольших манипуляций у меня получился вот такой таймер обратного отсчета времени:

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

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

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

Спасибо, что поделились статьей в социальных сетях!