Простой таймер на JavaScript

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

Обновить страницу [ 999 ]

Это обычная ссылка, которая оформлена при помощи CSS стилей. Сами стили не публикую, работать будет и без них. Оформить каждый из Вас сможет под себя. Перейдём к javascript коду:

<script>

 function timer(){	

    var obj=document.getElementById('RealButton');
    var regexp = /(\d+)/i;
    var RealTimer = regexp.exec(obj.innerHTML)[0];
    
    if (--RealTimer < 0) RealTimer = 0;

    obj.innerHTML = 'Обновить страницу [ '+RealTimer+' ]';
    
    if (RealTimer==0) { 
	   location.replace("https://realadmin.ru/coding/button-timer-js.html"); 
	   return; 
    }
    else { setTimeout(timer,1000); }
  }	

 setTimeout(timer,1000);

</script>

<a id="RealButton" href="/coding/button-timer-js.html">Обновить страницу [ 999 ]</a>

Код простой и основан на рекурсивном вызове функции. В функции «time» получаем содержимое html тега с идентификатором «RealButton» и с помощью регулярного выражения извлекаем из него число, которое является текущим значением таймера:

    var regexp = /(\d+)/i;
    var RealTimer = regexp.exec(obj.innerHTML)[0];

Затем уменьшаем значение таймера на единицу и проверяем, не пора ли останавливать его. Если пора, то выполняем какое-нибудь действие и возвращаем значение «true», иначе, повторно вызываем функцию «time». И так до тех пор, пока значение «RealTimer» не станет равным нулю.