Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   javascript timer (https://javascript.ru/forum/misc/50943-javascript-timer.html)

Vampir3 17.10.2014 20:10

javascript timer
 
Вообщем есть элемент типа
<span>time left <span id="lbTime">02:13</span></span>

время идет в обратном направлении и до нуля

как можно сделать это время "живым" (чтоб тикал)?
чтоб каждую секунду из таймера соответственно вычиталась 1 секунда
а когда время = 00:00, то выводить какой-нибудь алерт()

Начал в этом роде, но не могу понять какой интервал задавать и что в нем делать

var now = (new Date()).getTime();

var a = document.getElementById('lbTime');
var t = a.innerHTML.split(':');
var m = parseInt(t[0]);
var s = parseInt(t[1]);
var left = m*60+s*1;

ruslan_mart 17.10.2014 20:15

Vampir3, setInterval

Vampir3 17.10.2014 20:16

я знаю что такое setinterval, я не могу понять как таймер сделать

ruslan_mart 17.10.2014 20:18

Vampir3, через setInterval. Ставь setInterval с одной секундой и уменьшай значение счётчика, пока не станет 0.

danik.js 17.10.2014 20:27

Цитата:

Сообщение от Ruslan_xDD
Ставь setInterval с одной секундой и уменьшай значение счётчика, пока не станет 0.

Ну это тогда получится не слишком точный таймер. Но ведь тс наверняка и так сойдет )

XelaNimed 17.10.2014 21:55

Здравствуйте.
Посмотрите пример на JSFiddle.
Или можете запустить здесь:
<iframe width="100%" height="300" src="http://jsfiddle.net/XelaNimed/0v1dnytw/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Arramis 17.10.2014 23:11

XelaNimed,
ну и код у тебя... в чём выгода все время явно работать с глобальным пространством имён ??
не лень столько раз писать window ?

Erolast 18.10.2014 06:33

И зачем возвращать undefined, да еще и таким извращенским способом?

ruslan_mart 18.10.2014 12:03

http://learn.javascript.ru/play/uX1Dlb

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <span id="timer"></span>

    <script>
      (function() {
        function onTimeEnd() {
          alert('Boom!');
          //В this будет передана ссылка на сам элемент с таймером.
          //this.style.display = 'none'; /*Можно скрыть теймер при истечении*/
        };
        function secondsToTime(seconds) {
          return new Date(null, null, null, null, null, seconds).toTimeString().match(/\d{2}:(\d{2}:\d{2})/)[1];
        };
        var elem = document.getElementById('timer'),
            interval = setInterval(function() {
          		elem.innerHTML = secondsToTime(startTime);
              if(!startTime--) {
                onTimeEnd.call(elem);
                clearInterval(interval);
              }
        	}, 1E3),
            startTime = 30; //Стартовое количество в секундах.
      })();
    </script>

  </body>
</html>

Vampir3 18.10.2014 13:35

Ruslan_xDD Спасибо, еще вопрос - с чем связана задержка в самом начале перед началом отсчёта?

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <span id="timer">00:15</span>
    <script>
        function onTimeEnd() {
          window.location.href += "";
        }
		
        function secondsToTime(seconds) {
          return new Date(null, null, null, null, null, seconds).toTimeString().match(/\d{2}:(\d{2}:\d{2})/)[1];
        }
		
        function setTimer() {
			var elem = document.getElementById('timer');
			var e = elem.innerHTML.split(':');
			var m = parseInt(e[0]);
			var s = parseInt(e[1]);
			var secleft = m*60+s*1;
            interval = setInterval(function() {
                elem.innerHTML = secondsToTime(startTime);
              if(!startTime--) {
                onTimeEnd();
                clearInterval(interval);
              }
            }, 1000);
            startTime = secleft;
		}
		setTimer();
			</script>
  </body>
</html>


Часовой пояс GMT +3, время: 23:23.