ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
Готовые JavaScript скрипты для сайтов. W3Schools на русском

Таймер на сайте


Таймер на сайте, который отсчитывает время. Скрипт на JavaScript

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

Для создания такого таймера необходимо написать следующий код:

Пример JavaScript-кода:

<script>
 function startTimer() {
  var my_timer = document.getElementById("my_timer");
  var time = my_timer.innerHTML;
  var arr = time.split(":");
  var h = arr[0];
  var m = arr[1];
  var s = arr[2];
  if (s == 0) {
   if (m == 0) {
   if (h == 0) {
    alert("Ваше время вышло");
    window.location.reload();
    return;
   }
   h--;
   m = 60;
   if (h < 10) h = "0" + h;
  }
  m--;
  if (m < 10) m = "0" + m;
  s = 59;
 }
 else s--;
 if (s < 10) s = "0" + s;
 document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
 setTimeout(startTimer, 1000);
}
</script>

JavaScript-код необходимо вставить между тегами <head> и </head>.

Начальное значение таймера задаётся в html-коде внутри тегов <span> и </span> в виде: часы:минуты:секунды.

Пример HTML-кода:

<p><span id="my_timer" style="color: #f00; font-size: 120%; font-weight: bold;">01:05:00</span></p>

Скопируйте данный html-код и вставьте его в нужном месте на веб-странице между тегами <body> и </body>.

Также пропишите для тега <body> следующее значение:

<body onload="startTimer()">

Результат работы скрипта

01:05:00