Таймер на JavaScript

Скрипт считает сколько прошло времени (часы:минуты:секунды) с момента его запуска. Использовать скрипт можно не только в он-лайн играх, но и в текстовых блоках типа "время проведенное на сайте", "время потраченное на выполнение теста" и т.п.

Создаем функцию, добавляющую таймер в документ. Объявляем переменные:


function timeOn() {

	var sec = 0;
	var min = 0;
	var hour = 0;
	var body = document.getElementsByTagName("body")[0];
	var cont = document.createElement('div');
	var elem = document.createElement('div');
	elem.innerHTML = hour + ":0" + min + ":0" + sec;
	cont.appendChild(elem);
	body.appendChild(cont);

Создаем функцию для запуска таймера и запускаем таймер:


	var a = setInterval ( function() {
		sec++;

		if ( sec==60 ) {
			sec = 0;
			min++;

		} else if (min==60) {
			min = 0;
			hour++;
		}

		if ( sec < 10 )  {
			brS = ":0"; // добавить перед секундами 0, если число не двузначное
		} else { brS = ":"} ;

		if ( min < 10 )  {
			brM = ":0"; // добавить перед минутами 0, если число не двузначное
		} else { brM = ":"} ;

		if (hour == 2) { // остановить работу скрипта, если прошло 2 часа
			min = 0;
			sec = 0;

			clearInterval(a);
		}

		elem.innerHTML = hour + brM + min + brS + sec;
	},1000 );

}
timeOn();

Основной алгоритм работы функции - посекундно увеличивать переменную sec на единицу, когда значение секунд равно 60, увеличиваем переменную min на единицу, и когда значение min равно 60, увеличиваем hour на единицу. В примере работы скрипта, таймер останавливается, когда значение hour равно 2, конечно же при необходимости это условие можно изменить или вообще убрать.

Данный скрипт также можно синхронизировать с местным временим, используя конструктор дат new Date(), тогда получатся полноценные часы на JavaScript. Вопросы и замечания по работе скрипта пишем в комментариях.

27 апр. 2012 7,082 1

Добавить комментарий

freeden
Оксана

<div id="link"></div>
<script type="text/javascript">
var obj = document.getElementById('link');
var timerFIG = 61; // Время в секундах, через которое появляется кнопка
var timer = setInterval("startTimer()",1000);
function startTimer() {
   if(timerFIG !== 1) {
      timerFIG--;
   } else {
      clearInterval(timer);
      obj.innerHTML = 'Тренажер'; // текст/картинка/ссылка
   }
}
</script>

Он создает таймер обратного отсчета, но отсчет времени не виден на странице. Можно это исправить? Я хочу чтобы отсчет времени был визуально виден. И как можно сделать, чтобы таймер не перезапускался при переходе на другую страницу, а продолжил свой отсчет.

Что такое облачное хранилище и как им пользоваться?