Выбрать страницу

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

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

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

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

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

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

window.addEvent('domready', function(){
		//Определяем и инициализируем переменную таймера
		var timers = { timer: 60};
		//Функция которая будет вызываться каждую секунду.
		//В ней мы уменьшаем значение счетчика и если он равен 0,
		//то закрываем страницу, иначе выводим на кнопку оставшиеся секуды
		var TimeTic = function (){
			this.timer--;
			if (this.timer==0){
				self.close();
			}else{
				$('close').value='Закрыть ('+this.timer+' сек)';
			}
		}
		//Заставляем функцию выполняться каждую секунду
		TimeTic.periodical(1000, timers);
		//Обработчик нажатия кнопки
		$('close').addEvent('click', function(){
				self.close();
		});
	});


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

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

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

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

	window.addEvent('domready', function(){
		//Определяем и инициализируем переменную таймера
		var timers = { timer: 60};
		//Функция которая будет вызываться каждую секунду.
		//В ней мы уменьшаем значение счетчика и если он равен 0,
		//то закрываем страницу, иначе выводим на кнопку оставшиеся секуды
		var TimeTic = function (){
			this.timer--;
			if (this.timer==0){
				self.close();
			}else{
				$('close').value='Закрыть ('+this.timer+' сек)';
			}
		}
		//Заставляем функцию выполняться каждую секунду
		TimeTic.periodical(1000, timers);
		//При нажатии любой кнопки внутри тэга с id 'bodymain’ 
		//сбрасываем таймер на начало отчета
		$('bodymain').addEvent('keydown', function(){
			timers.timer=60;
		});
		//Обработчик нажатия кнопки
		$('close').addEvent('click', function(){
				self.close();
		});
	});


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

Share This