RealAdmin.ru

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

JavaScript
Категория: Кодинг
05 Май 2014 г. в 22:32

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

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

<script type="text/javascript">

 function timer(){	

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

    obj.innerHTML = 'Обновить страницу [ '+RealTimer+' ]';
    
    if (RealTimer==0) { 
	   location.replace("http://realadmin.ru/coding/button-timer-js.html"); 
	   return true; 
    }
    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» не станет равным нулю.

Теги:
Посмотрите похожее — 6
Комментарии — 14
  1. avatar Михаил 01 мая 2016, 17:11 #
    Здравствуйте, отличная статья!
    Подскажите как сделать данный таймер, что б он включался по клику а не при загрузке страницы?
    Спасибо! отличный сайт много что полезного можно найти!
    1. avatar Simkin Andrew 02 мая 2016, 10:53 #
      Привет. Просто вызывать функцию при клике на ссылку, или другой какой-то элемент, так например:
      <a href="#" onclick="setTimeout(timer,1000); return false;">Клик для запуска</a>
      Функцию timer, конечно заранее прописать как в примере.
      1. avatar Михаил 02 мая 2016, 15:04 #
        Огромное спасибо!
    2. avatar Евгений 11 мая 2016, 08:05 #
      Здравствуйте. Хотел поинтересоваться.
      В контакте когда что нибудь пишешь на своей страничке есть таймер для задержки и выкладывания поста в заданное время.
      Можно прописать таймер в обратном порядке? Что бы запись появившись в заданное время через заданное время обратно исчезала?

      Спасибо много интересного!
      1. avatar Simkin Andrew 12 мая 2016, 21:57 #
        Я с API вконтакте не знаком
      2. avatar Николай 17 августа 2016, 21:27 #
        Добрый день, подскажите пожалуйста как можно заблокировать кнопку для перехода на несколько секунд, чтобы посетитель сайта чуть дольше обычного пробыл на нужно странице
        1. avatar Simkin Andrew 17 августа 2016, 21:37 #
          Ну например, изначально в href прописать javascript:void(0), а после окончания отсчета таймера присваивать в href реальную ссылку на страницу.
        2. avatar Николай 17 августа 2016, 21:50(был изменён) #
          Если не затруднит, могли бы подробнее на данном примере подсказать
          a data-jss=«b-search-button» data-analytics-event=«top_menu-find_button» href=«ссылуа.html» class=«button raised xl primary uppercase form_horizontal__control»
          Выбрать
          1. avatar Simkin Andrew 18 августа 2016, 13:02(был изменён) #
            Да вроде уже написал, в href прописываем чтобы нельзя было нажать на кнопку
            <a id="RealButton" href="javascript:void(0)">Выбрать [9]</a>
            
            А в скрипте меняем:
            location.replace("http://realadmin.ru/coding/button-timer-js.html");
            на obj.setAttribute('href','ссылка по которой разрешить переход')
            
          2. avatar Николай 18 августа 2016, 13:05 #
            спасибо
            1. avatar Дмитрий 18 августа 2016, 17:04 #
              Подскажите как сделать, чтобы при нажатии таймер с нуля вновь приобретал какое-то значение. Например, ставим на 30 секунд, таймер дошел до нуля, нажимаем на кнопку и снова отсчет от 30 (не обновляя страницу).
              1. avatar Simkin Andrew 19 августа 2016, 09:28 #
                Так можно попробовать:
                <a id="RealButton" href="#" onclick="document.getElementById('RealButton').innerHTML='Обнулить таймер [30]'; setTimeout(timer,1000); return false;">Обнулить таймер [30]</a>
              2. avatar Алмаз Изгужин 24 ноября 2016, 01:57 #
                Админ красава! Лови лойс! Спасибо за скрипт и активацию при клике.
                1. avatar Simkin Andrew 24 ноября 2016, 20:05 #
                  Thanks!
                © REALADMIN.RU   2016 г.
                Страница сгенерирована: 0,0998 s | 10 mb.
                На каком уровне Вы играете в шахматы?
                О П Р О С
                Home Question Top