RealAdmin.ru

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

Простой таймер на JavaScript
Категория: Кодинг
Комментарии: 43

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

      Спасибо много интересного!
      1. Simkin Andrew12 мая 2016, 21:57#
        Я с API вконтакте не знаком
      2. Николай17 августа 2016, 21:27#
        Добрый день, подскажите пожалуйста как можно заблокировать кнопку для перехода на несколько секунд, чтобы посетитель сайта чуть дольше обычного пробыл на нужно странице
        1. Simkin Andrew17 августа 2016, 21:37#
          Ну например, изначально в href прописать javascript:void(0), а после окончания отсчета таймера присваивать в href реальную ссылку на страницу.
        2. Николай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. Simkin Andrew18 августа 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. Николай18 августа 2016, 13:05#
            спасибо
            1. Дмитрий18 августа 2016, 17:04#
              Подскажите как сделать, чтобы при нажатии таймер с нуля вновь приобретал какое-то значение. Например, ставим на 30 секунд, таймер дошел до нуля, нажимаем на кнопку и снова отсчет от 30 (не обновляя страницу).
              1. Simkin Andrew19 августа 2016, 09:28#
                Так можно попробовать:
                <a id="RealButton" href="#" onclick="document.getElementById('RealButton').innerHTML='Обнулить таймер [30]'; setTimeout(timer,1000); return false;">Обнулить таймер [30]</a>
              2. Алмаз Изгужин24 ноября 2016, 01:57#
                Админ красава! Лови лойс! Спасибо за скрипт и активацию при клике.
                1. Simkin Andrew24 ноября 2016, 20:05#
                  Thanks!
                2. вутшы15405 декабря 2016, 23:14#
                  Здравствуйте подскажите пожалуйста а как сделать что бы кнопка появилась после окончании таймера вот как здесь http://adf.ly/1ezsbo эта не реклама
                  1. Simkin Andrew05 декабря 2016, 23:24#
                    Не совсем понятно. Кнопка — таймер должна быть изначально. Какая-то другая кнопка должна появится? Вместо location.replace пишите код появления этой кнопки, типа:
                    $('#myBtn').show();
                  2. вутшы15406 декабря 2016, 08:11#
                    А где именно его прописать $('#myBtn').show();

                    Выбрать [9]

                    1. вутшы15406 декабря 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. Simkin Andrew06 декабря 2016, 10:30#
                        Я же написал где. В условии когда таймер равен нулю можно прописать что угодно. То есть, должно получится как-то так:
                        if (RealTimer==0) {
                        	$('.button24').show();
                        	return true;
                        }
                      2. вутшы15406 декабря 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. 4prod.tk@gmail.com05 января 2017, 18:10#
                          А как сделать чтобы за определённое время появилась ссылка на скачивание файла?
                          1. Simkin Andrew05 января 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. владимир павлюк28 января 2017, 16:38#
                            здравствуйте нуже таймер, что бы при обновлении он не начинался заново а продолжался и при дохода до конца вновь начинался, спасибо
                            1. Simkin Andrew28 января 2017, 18:29#
                              Добрый вечер. Я ничего не понял)
                            2. владимир павлюк28 января 2017, 21:16#
                              )
                              1. владимир павлюк28 января 2017, 21:18#
                                ну например таймер на 6мин, обновляешь страницы он продолжается( а не начинается заново) прошли 6мин обновляешь страницу и он снова начинает отсчет
                                1. владимир павлюк28 января 2017, 21:20#
                                  мне надо как то привязать к кнопке что б она срабатывала через каждые 6минут и появлялась только по истечении 6 минут после нажатия
                                  1. Simkin Andrew29 января 2017, 15:37#
                                    Ну изучай функцию setTimeout там можно указать через какой промежуток должен отработать код в функции. А уже в функции пиши что хочешь, хоть появление кнопки, хоть обновление страницы:
                                    setTimeout(function(){//тут код, который отработает после истечения 6 минут},1000*60*6);
                                  2. владимир павлюк29 января 2017, 17:48#
                                    спасибо
                                    1. владимир павлюк05 февраля 2017, 19:19#
                                      Здравствуйте, как я могу с вами связаться мне очень нужна ваша помощь
                                      1. Simkin Andrew05 февраля 2017, 19:23#
                                        Добрый вечер. Емейл внизу сайта, но я не уверен что найду время на помощь.
                                      2. владимир павлюк05 февраля 2017, 19:28#
                                        а если это будет помощь за за вознаграждение? )
                                        1. Simkin Andrew05 февраля 2017, 21:31#
                                          Нет, я денег здесь ни с кого не беру, но и тратить более 5 минут на ответы и помощь не могу.
                                        2. Александр08 марта 2017, 18:12#
                                          А есть ли возможность прикрутить данный скрипт не к одной ссылке а к примеру к 5-10 и т.д.? То есть нажали кнопку 1 — на кнопке запустился таймер 10 минут, нажали кнопку 2 — запустился таймер на 5 минут и т.д, при этом что бы каждая кнопка отсчитывала свое время?
                                          1. Simkin Andrew09 марта 2017, 20:07#
                                            нет, конкретно этот скрипт так не получится прикрутить. Нужно всё переписывать.
                                            1. Bit31 марта 2017, 22:16#
                                              Меня тоже интересовал вопрос по отсчету, как написал Александр, Но вы говорите, что нельзя и нужно переписывать, может поможете и напишите статейку на такую тему «Как вставить скрипт с обратным таймером на несколько кнопок» Было бы очень прекрасно! Спасибо за эту статью, жаль что не помогла((
                                          2. МиХеЙ5427 апреля 2017, 20:38(был изменён)#
                                            Бился над этой проблемой))) В программировании полный 0! Делаю свой сайт на WIX и нужна была кнопка с обратным таймером… Перерыл кучу форумов, везде либо инфа для спецов либо совсем не то что надо… Кое как нашел полу заготовку)) кнопка работает! переводит на нужную ссылку но 1 раз… 2 дня и три ночи методом тыка… меняя по буковке и проверяя её работу, нашел нужный подход… Теперь таймер отрабатывает столько раз сколько надо))) Фигово что после перезагрузке страницы сбивается… но мож и этот ход как нибудь нащупаю!
                                            1. Артём29 октября 2017, 17:43#
                                              Здравствуйте, крутой вариант, искал такой, подскажите пожалуйста, возможно ли после окончания времени, что бы ноченалась загрузка на пк. реально это вообще? как это можно сделать?
                                              1. Simkin Andrew29 октября 2017, 21:29#
                                                JavaScript браузерный язык, никаких программ запускать он не может.
                                              2. Алексей17 октября 2018, 20:40#
                                                Ребят помогите, у меня чутка обратный вопрос. Возможно ли узнать куда меня перенаправит сайт после истечения таймера?
                                                1. Simkin Andrew17 октября 2018, 21:46#
                                                  Какой адрес укажешь, туда и перенаправит)
                                                  1. Алексей17 октября 2018, 22:19#
                                                    Да вот суть в том, что я хочу вытянуть этот сайт до истечения таймера. Возможно ли это? Дело в том что URL не сразу отрисовывается по истечению таймера, а спустя секунд 10. Но знаю, что люди умудряются вытянуть его за 15 сек до конца. А это очень важные секунды.
                                                    1. Simkin Andrew18 октября 2018, 14:10#
                                                      не знаю, не могу понять что требуется. Если сайт медленно загружается, но это его проблемы.
                                                © REALADMIN.RU   2019 г.
                                                Страница сгенерирована: 0,1025 s | 12 mb.
                                                На каком уровне Вы играете в шахматы?
                                                О П Р О С