Таймер обратного отчета с использованием JavaScript и Mootools


Многие видели кнопку на которой бегут секунды показывающие, сколько времени осталось для срабатывания кнопки.

Вот и мне понадобилось сделать нечто такое, что из этого получилось читайте дальше…

В моей задаче нужна была кнопка «Закрыть», по нажатию на которую страница закрывалась. Но потом выяснилось, что очень хотелось бы, чтобы по истечению некоторого промежутка времени страничка должна закрываться сама. Просто поставить таймер на определенной время — могло вызвать много вопросом, вроде того, она сама закрылась и прочее. Было решено вывести обратный отчет на саму кнопку.

Это HTML код самой кнопки:

  1. <input type="button" id="close" value="Закрыть (60 сек)" >

А это JavaScript выполняющий всю работу:

  1.  window.addEvent('domready', function(){
  2.   //Определяем и инициализируем переменную таймера
  3.   var timers = { timer: 60};
  4.   //Функция которая будет вызываться каждую секунду.
  5.   //В ней мы уменьшаем значение счетчика и если он равен 0,
  6.   //то закрываем страницу, иначе выводим на кнопку оставшиеся секуды
  7.   var TimeTic = function (){
  8.    this.timer—;
  9.    if (this.timer==0){
  10.     self.close();
  11.    }else{
  12.     $('close').value='Закрыть ('+this.timer+' сек)';
  13.    }
  14.   }
  15.   //Заставляем функцию выполняться каждую секунду
  16.   TimeTic.periodical(1000, timers);
  17.   //Обработчик нажатия кнопки
  18.   $('close').addEvent('click', function(){
  19.     self.close();
  20.   });
  21.  });

В дальнейшем было добавлена возможность сброса таймера, если пользователь вводит данные в форму, а точнее, если перефразировать при нажатии на любую кнопку таймер начинал отчет заново.

Мобильные телефон прочно вошли в нашу жизнь. Еще совсем недавно сотовый телефон был в диковинку, а сейчас это уже несущая необходимость. На сайте ремонт телефонов вы сможете оценить предварительную стоимость ремонта и даже разместить заявку на ремонт.

HTML код становиться таким:

  1. <body id="bodymain">
  2. <input type="button" id="close" value="Закрыть (60 сек)" >
  3. </body>

А JavaScript код вот таким:

  1.  window.addEvent('domready', function(){
  2.   //Определяем и инициализируем переменную таймера
  3.   var timers = { timer: 60};
  4.   //Функция которая будет вызываться каждую секунду.
  5.   //В ней мы уменьшаем значение счетчика и если он равен 0,
  6.   //то закрываем страницу, иначе выводим на кнопку оставшиеся секуды
  7.   var TimeTic = function (){
  8.    this.timer—;
  9.    if (this.timer==0){
  10.     self.close();
  11.    }else{
  12.     $('close').value='Закрыть ('+this.timer+' сек)';
  13.    }
  14.   }
  15.   //Заставляем функцию выполняться каждую секунду
  16.   TimeTic.periodical(1000, timers);
  17.   //При нажатии любой кнопки внутри тэга с id 'bodymain’
  18.   //сбрасываем таймер на начало отчета
  19.   $('bodymain').addEvent('keydown', function(){
  20.    timers.timer=60;
  21.   });
  22.   //Обработчик нажатия кнопки
  23.   $('close').addEvent('click', function(){
  24.     self.close();
  25.   });
  26.  });

Как обычно жду ваших вопросов и комментариев.

3 комментария to “Таймер обратного отчета с использованием JavaScript и Mootools”

  1. Спсибо за счётчик тоже нужен недавно был готовыр решений в нете не нашёл, а тут как подарок =)

  2. Большущее спасибо за счетчик.

  3. Спасибо, но было бы неплохо если бы сразу можно и демо посмотреть

Leave a Reply