Таймеры обратного отсчета на ваш сайт

Время на чтение: 3 минут(ы)

Таймеры обратного отсчета на ваш сайт

Таймеры обратного отсчета полезно устанавливать на сайт, когда нужно обозначить вашим читателям сроки проведения мероприятий - акций, скидок, распродаж, а также, когда вы создаёте событийный контент. Достаточно сложно найти в интернете качественные плагины для WordPress, а также на другие движки. К счастью, существуют генераторы онлайн, которые справляются с этой задачей. Узнайте сколько осталось до Нового 2021 года.

До конца акции:
  1. https://megatimer.ru/ - сервис, пример счетчика которого я установила в качестве примера выше.
  2. https://elfsight.com/countdown-timer-widget/html/ - красивые виджеты, но урезанная бесплатная версия. Она ограничена количеством просмотров. Поэтому если у вас обширная аудитория, то этот таймер вам не подойдет.
  3. https://www.tickcounter.com/ - нельзя изменять внешний вид таймера, а именно размер шрифта и сам шрифт. Изменяется только цветовая гамма. Поддержка русского языка:
    Таймеры обратного отсчета на ваш сайт
  4. https://elfsight.com/countdown-timer-widget/examples/ - разные шаблоны счетчиков, но есть ограничения демо-версией (по количеству созданных счетчиков и посетителей в день).
  5. https://e-timer.ru/ - таймер во всплывающем окне. Простые настройки, но небольшой выбор дизайна виджета. Пример:
    Таймеры обратного отсчета на ваш сайт
  6. https://hello-site.ru/timer/ - простые счетчики отсчета времени. можно зациклить. Макеты:
    Таймеры обратного отсчета на ваш сайт
  7. https://frantsuzzz.com/timeronline - оригинальный внешний вид. Модно настроить надпись до события и после его свершения.
    Таймеры обратного отсчета на ваш сайт
  8. https://makedreamprofits.ru/pt/video/ - разнообразные счетчики на любой вкус. Виджеты для сайта и e-mail-рассылки. Необходима регистрация.

    Загрузка таймера

    Таймеры обратного отсчета на ваш сайт

  9. https://budila.online/timer/ - простой iframe-таймер. Простой внешний вид, разные размеры. Дизайн не изменяется.
    Таймеры обратного отсчета на ваш сайт
  10. https://promofeatures.com/create-countdown-timer-for-website#! - еще один конструктор скриптов счетчиков обратного отсчета. Несмотря на то, что сайт англоязычный, вы можете выбрать в настройках русский язык и творить! Необходима регистрация или вход через соцсети.

Скрипт:

<style>
p {
text-align: center;
font-size: 20px;
margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("June 5, 2020 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " дней " + hours + " часов "
+ minutes + "мин ";

// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Акция завершена";
}
}, 1000);
</script>

Можно сохранить код скрипта, заключенную между <script> и </script> в блокнот и сохранить с расширением js. Загрузить на любой хостинг, это может быть dropbox или файловый менеджер Ucoz, а также на собственный хостинг. Возьмите прямую ссылку на скрипт и добавьте в запись код:

<p id="demo">&nbsp;</p>
<script src="ссылка на скрипт"></script>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *