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
Комментарии — 33
  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!
                2. avatar вутшы154 05 декабря 2016, 23:14 #
                  Здравствуйте подскажите пожалуйста а как сделать что бы кнопка появилась после окончании таймера вот как здесь http://adf.ly/1ezsbo эта не реклама
                  1. avatar Simkin Andrew 05 декабря 2016, 23:24 #
                    Не совсем понятно. Кнопка — таймер должна быть изначально. Какая-то другая кнопка должна появится? Вместо location.replace пишите код появления этой кнопки, типа:
                    $('#myBtn').show();
                  2. avatar вутшы154 06 декабря 2016, 08:11 #
                    А где именно его прописать $('#myBtn').show();

                    Выбрать [9]

                    1. avatar вутшы154 06 декабря 2016, 08:12(был изменён) #
                      <a id="RealButton" href="javascript:void(0)">Выбрать [9]</a>
                      
                      <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) { 
                      	   obj.setAttribute('href','<?php echo $url["url"] ?>'); 
                      	   return true; 
                          }
                          else { setTimeout(timer,1000); }
                        }	
                      
                       setTimeout(timer,1000);
                      
                      </script>
                      1. avatar Simkin Andrew 06 декабря 2016, 10:30 #
                        Я же написал где. В условии когда таймер равен нулю можно прописать что угодно. То есть, должно получится как-то так:
                        if (RealTimer==0) {
                        	$('.button24').show();
                        	return true;
                        }
                      2. avatar вутшы154 06 декабря 2016, 08:18(был изменён) #
                        Мне Нада чтобы кнопка появилась после окончании таймера вот эту кнопку надо сделать чтобы она появлялась после окончании таймера и как стиль css добавить к таймеру цифр по жирней сделать и цвет поменять вот сама кнопка и стили
                        <a href="#" class="button24">кнопка</a>
                        
                        ----------------------------------------------------------------
                        a.button24 {
                          display: inline-block;
                          color: white;
                          text-decoration: none;
                          padding: .5em 2em;
                          outline: none;
                          border-width: 2px 0;
                          border-style: solid none;
                          border-color: #FDBE33 #000 #D77206;
                          border-radius: 6px;
                          background: linear-gradient(#F3AE0F, #E38916) #E38916;
                          transition: 0.2s;
                        } 
                        a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
                        a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
                        
                        1. avatar 4prod.tk@gmail.com 05 января 2017, 18:10 #
                          А как сделать чтобы за определённое время появилась ссылка на скачивание файла?
                          1. avatar Simkin Andrew 05 января 2017, 22:09 #
                            Вставляешь на страницу блок div c уникальным идентификатором, типа id=«wrapper-link» и пишешь js код:
                            setTimeout(function(){
                            	obj=document.getElementById('wrapper-link');
                            	obj.innerHTML = '<a href="/file.doc">Ссылка</a>';
                            },2000);
                          2. avatar владимир павлюк 28 января 2017, 16:38 #
                            здравствуйте нуже таймер, что бы при обновлении он не начинался заново а продолжался и при дохода до конца вновь начинался, спасибо
                            1. avatar Simkin Andrew 28 января 2017, 18:29 #
                              Добрый вечер. Я ничего не понял)
                            2. avatar владимир павлюк 28 января 2017, 21:16 #
                              )
                              1. avatar владимир павлюк 28 января 2017, 21:18 #
                                ну например таймер на 6мин, обновляешь страницы он продолжается( а не начинается заново) прошли 6мин обновляешь страницу и он снова начинает отсчет
                                1. avatar владимир павлюк 28 января 2017, 21:20 #
                                  мне надо как то привязать к кнопке что б она срабатывала через каждые 6минут и появлялась только по истечении 6 минут после нажатия
                                  1. avatar Simkin Andrew 29 января 2017, 15:37 #
                                    Ну изучай функцию setTimeout там можно указать через какой промежуток должен отработать код в функции. А уже в функции пиши что хочешь, хоть появление кнопки, хоть обновление страницы:
                                    setTimeout(function(){//тут код, который отработает после истечения 6 минут},1000*60*6);
                                  2. avatar владимир павлюк 29 января 2017, 17:48 #
                                    спасибо
                                    1. avatar владимир павлюк 05 февраля 2017, 19:19 #
                                      Здравствуйте, как я могу с вами связаться мне очень нужна ваша помощь
                                      1. avatar Simkin Andrew 05 февраля 2017, 19:23 #
                                        Добрый вечер. Емейл внизу сайта, но я не уверен что найду время на помощь.
                                      2. avatar владимир павлюк 05 февраля 2017, 19:28 #
                                        а если это будет помощь за за вознаграждение? )
                                        1. avatar Simkin Andrew 05 февраля 2017, 21:31 #
                                          Нет, я денег здесь ни с кого не беру, но и тратить более 5 минут на ответы и помощь не могу.
                                        © REALADMIN.RU   2017 г.
                                        Страница сгенерирована: 0,1302 s | 10 mb.
                                        На каком уровне Вы играете в шахматы?
                                        О П Р О С
                                        Home Question Top