Вход

Просмотр полной версии : javascript timer

Vampir3
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
17.10.2014, 20:15
Vampir3, setInterval (http://javascript.ru/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
Ставь setInterval с одной секундой и уменьшай значение счётчика, пока не станет 0.
Ну это тогда получится не слишком точный таймер. Но ведь тс наверняка и так сойдет )
XelaNimed
17.10.2014, 21:55
Здравствуйте.
Посмотрите пример на JSFiddle (http://jsfiddle.net/XelaNimed/0v1dnytw/).
Или можете запустить здесь:
<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>
ruslan_mart
18.10.2014, 13:44
Vampir3, с тем, что таймер начинает срабатывать через секунду. Можете указать например в startTime значение 29, а в сам span написать вручную 00:30.
Vampir3
18.10.2014, 13:47
спасибо большое) разобрался))
melky
18.10.2014, 14:04
О. как раз недавно делал такую штуку.

Обратный отсчёт ведётся до даты, указанной в формате 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();