Таймер обратного отсчета для сайта

Опубликовано: 05.07.2020 в категории: Скрипты

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

Содержание статьи

1 Виды таймеров обратного отсчета
2 Простой таймер обратного отсчета
3 Таймер обратного отсчета для сайта

Виды таймеров обратного отсчета

Первый вариант — таймер отсчитывает указанное вами необходимое время до окончания какой либо акции. Например вы устанавливаете скидку на какой-то товар на 10 дней, и таймер будет добросовестно отсчитывать время до окончания 10-ти дневного срока.
Второй вариант — таймер отсчитывает время до указанной вами даты. То есть вы устанавливаете дату окончания акции, а таймер показывает сколько осталось времени до этой даты.

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

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

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

Итак, самый простой скрипт на PHP «таймер обратного отсчета». Он показывает количество дней, дней и часов или дней, часов, минут и секунд (на ваше усмотрение) при каждом открытии страницы с таймером. Его недостаток в том, что он показывает время только при перезагрузке страницы. То есть на открытой странице у Вас секунды «мигать» и меняться не будут. Этот таймер удобно использовать если вы отсчитываете только дни.

Но может быть для кого-то этого вполне достаточно. Вот код простого таймера.

<?php
$endOfDiscount = mktime(0,0,0,01,01,2020); // дата окончания акции последовательность(час,мин,сек,мес,число,год)
$now = time(); // текущее время
$secondsRemaining = $endOfDiscount - $now; // оставшееся время
define('SECONDS_PER_MINUTE', 60); // секунд в минуте
define('SECONDS_PER_HOUR', 3600); // секунд в часу
define('SECONDS_PER_DAY', 86400); // секунд в дне

$daysRemaining = floor($secondsRemaining / SECONDS_PER_DAY); //дни, до даты
$secondsRemaining -= ($daysRemaining * SECONDS_PER_DAY); //обновляем переменную

$hoursRemaining = floor($secondsRemaining / SECONDS_PER_HOUR); // часы до даты
$secondsRemaining -= ($hoursRemaining * SECONDS_PER_HOUR); //обновляем переменную

$minutesRemaining = floor($secondsRemaining / SECONDS_PER_MINUTE); //минуты до даты
$secondsRemaining -= ($minutesRemaining * SECONDS_PER_MINUTE); //обновляем переменную

echo("<h3>До Нового Года осталось:<br/> $daysRemaining дн. $hoursRemaining час. $minutesRemaining мин. $secondsRemaining сек.</h3>"); //выводим сообщение
?>

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

Таймер обратного отсчета для сайта

Это полноценный таймер обратного отсчета для сайта на JS. Посмотреть работу таймера можно здесь: Пример таймера. В примере таймер отсчитывает время до Нового года.

Такой таймер подойдет для любого сайта. Сложностей в его установке нет.

В файл CSS сайта или перед тегом </head> страницы с таймером добавляете код стилей. Если вставляете стили непосредственно в страницу, не забудьте обернуть его в теги <style> и </style>.

body {
text-align: center;
background: #CC66CC;
font-family: sans-serif;
font-weight: 100;
}
.countdown-title {
  color: #990066;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
} 
.countdown {
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}
.countdown-number {
  padding: 10px;
  border-radius: 3px;
  background: #9900CC;
  display: inline-block;
}
.countdown-time {
  padding: 15px;
  border-radius: 3px;
  background: #990066;
  display: inline-block;
}
.countdown-text {
  display: block;
  padding-top: 5px;
  font-size: 16px;
}
.deadline-message{
  display: none;
  font-size: 24px;
  font-style: italic;
}
.visible{
  display: block;
}
.hidden{
  display: none;
}

В файл страницы вставляете код, приведенный ниже:

<h1 class="countdown-title">Таймер обратного отсчета для сайта</h1>
<div id="countdown" class="countdown">
<div class="countdown-number">
<span class="days countdown-time"></span>
<span class="countdown-text">Дни</span>
</div>
<div class="countdown-number">
    <span class="hours countdown-time"></span>
    <span class="countdown-text">Часы</span>
  </div>
  <div class="countdown-number">
    <span class="minutes countdown-time"></span>
    <span class="countdown-text">Минуты</span>
  </div>
  <div class="countdown-number">
    <span class="seconds countdown-time"></span>
    <span class="countdown-text">Секунды</span>
  </div>
</div>
<div id="deadline-message" class="deadline-message">
  Время акции истекло!
</div>
<!--  js script  -->
<script>
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
} 
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector(".days");
  var hoursSpan = clock.querySelector(".hours");
  var minutesSpan = clock.querySelector(".minutes");
  var secondsSpan = clock.querySelector(".seconds");
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    if (t.total <= 0) {
      document.getElementById("countdown").className = "hidden";
      document.getElementById("deadline-message").className = "visible";
      clearInterval(timeinterval);
      return true;
    } 
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
  } 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
 
var deadline = '2021-01-01'; // конечная дата отсчета
initializeClock('countdown', deadline);
</script>

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

var deadline = '2015-12-31';

или так:

var deadline = '31/12/2015';

или вот так:

var deadline = 'December 31 2015';

и если необходимо указать точное время с учетом часового пояса:

var deadline="January 01 2018 00:00:00 GMT+0300";

И последний вариант подойдет для лендингов – чтобы при всегда выводилось например 10 дней (можно указать любое время)

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

Можете скачать уже готовый файл html c таймером обратного отсчета.

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

Всем удачи!