Форум

Vampir3 · #1 (**permalink**) 17.10.2014, 20:10

Вообщем есть элемент типа

<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 · #2 (**permalink**) 17.10.2014, 20:15

Vampir3, setInterval

Vampir3 · #3 (**permalink**) 17.10.2014, 20:16

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

ruslan_mart · #4 (**permalink**) 17.10.2014, 20:18

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

danik.js · #5 (**permalink**) 17.10.2014, 20:27

Сообщение от Ruslan_xDD

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

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

XelaNimed · #6 (**permalink**) 17.10.2014, 21:55

Здравствуйте.
Посмотрите пример на JSFiddle.
Или можете запустить здесь:

<iframe width="100%" height="300" src="http://jsfiddle.net/XelaNimed/0v1dnytw/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Arramis · #7 (**permalink**) 17.10.2014, 23:11

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

Erolast · #8 (**permalink**) 18.10.2014, 06:33

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

ruslan_mart · #9 (**permalink**) 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 · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript