Javascript-форум - javascript timer

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - javascript timer (https://javascript.ru/forum/misc/50943-javascript-timer.html)

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;

Vampir3, setInterval

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

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

Цитата:

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

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

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

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

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

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

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

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>

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>

Vampir3, с тем, что таймер начинает срабатывать через секунду. Можете указать например в startTime значение 29, а в сам span написать вручную 00:30.

спасибо большое) разобрался))

О. как раз недавно делал такую штуку.

Обратный отсчёт ведётся до даты, указанной в формате timestamp:

http://jsbin.com/qezevabage/edit

Ток сделано в виде плагина для jQuery, но к нему не сильно привязано.

Формат тоже по стандартам Unix - %M для минут, %S для секунд

сам плугин:

(function ($) {
  $.fn.timer = function () {
    return $(this).each(function () {
      var $el = $(this);
      var countFrom = $el.data('time');
      var id = setInterval(function () {
        var delta = countFrom - Date.now() * 1e-3 | 0;
        if (delta < 0) {
          clearInterval(id);
          delta = 0;
        }
        var format = "%M:%S";
        var tokens = {
          'M': delta / 60 | 0,
          'S': delta % 60 | 0
        };
        var formatted = format.replace(/%(\w)/g, function (_, token) {
          var value = tokens[token];
          return value;
        });
        $el.html(formatted);
      }, 1 * 1e3);
    });
  };
})(jQuery);

использование:

в разметке:

<!-- Timestamp указывает на дату: (M/D/Y @ h:m:s): 10 / 18 / 14 @ 11:03:21am UTC -->
<div class="Time" data-time="1413630201"></div>

инициализация:

$('.Time').timer();