Всем большое спасибо за помощь. Работает. :dance:
Выкладываю то, что получилось. Скрипт:
setInterval(function() {
myTimer()
}, 1000)
function myTimer() {
var now = new Date();
var els = document.querySelectorAll('.timer-wrp');
for ( var i = 0; i < els.length; i++) {
var el_in = els[i].querySelectorAll('.time_in');
var t = parseInputInt(el_in[0]);
if (t == 0)
continue;
t--;
el_in[0].innerHTML = t;
var d = Math.floor(t / 86400);
var h = Math.floor((t - d * 86400) / 3600);
var m = Math.floor((t - d * 86400 - h * 3600) / 60);
var s = (t - d * 86400 - h * 3600 - m * 60);
var t_out = ((d > 0) ? d + ' days ' : '')
+ (((d > 0) || (h > 0)) ? h + ':' : '')
+ (((d > 0) || (h > 0) || (m > 0)) ? lid0(m) + ':' : '')
+ (((d > 0) || (h > 0) || (m > 0) || (s > 0)) ? lid0(s) : '');
var el_out = els[i].querySelectorAll('.time_show');
el_out[0].innerHTML = t_out;
}
}
function parseInputInt(el) {
var value = el.innerHTML;
return (value != "") ? parseInt(value, 10) : 0;
}
function lid0(num) {
return (num < 10) ? '0' + num : num;
}
Код страницы: <span class="timer-wrp"><span class="time_in">53931</span>[<span class="time_show" title="Time ot deadline"></span>]</span> CSS:
/** Timer */
span.time_in{
visibility: hidden;
display: none;
}
span.time_show{
color: red;
font-weight: bold;
}
Если будут предложения по улучшению кода, с радостью прислушаюсь и буду использовать себе во благо. :) |
Вродь такая отображалка - попроще ?
<div class="time_show"></div>
<div class="time_show"></div>
<div class="time_show"></div>
<script type="text/javascript">
//Распарс кол-ва секунд в дни и часы/Максимум - 30 дней/
function outViewTime(el,t){
var t1=new Date(0).setUTCMilliseconds(t*1000);
t1=(new Date(t1).toUTCString()).replace(/^.*?(\d+ ).*?(\d{2}:\d{2}:\d{2}).*$/i,"$1$2").split(' ');
el.innerHTML=(t1[0]-1)+' '+t1[1];
}
//Тут, должна быть функция перебора стека текущих остаточных времен;
var el_out = document.querySelectorAll('.time_show');
var t = 2*24*60*60 + 2*60*60 + 51*60 + 21//сек;
var i = 0;
outViewTime(el_out[i],t);
var t = 0*24*60*60 + 6*60*60 + 1*60 + 2//сек;
outViewTime(el_out[1],t);
</script>
|
Цитата:
var el_out = els[i].querySelector('.time_show');
el_out.innerHTML = t_out;
|
так кто-нибудь остановит этот таймер :stop:
|
Цитата:
По таймеру опрашиваем стек, уменьшаем времена в стеке и выводим, по значению 0 в стеке, очищаем очередь от этого элемента и проверяем стек на нулевую длину, при 0 - сбрасываем таймер. Собственно задача добавки/изъятия из стека по требованию(тут желательно упорядочить стек по увеличению остаточного времени), нун её добить, поскольку тут возникает и требование повторного перезапуска |
Цитата:
Цитата:
Цитата:
|
ладно, сам остановлю
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
span {
padding: 0.3em;
margin: 0.1em;
}
</style>
<script>
jQuery(function ($) {
for (var i = 0; i < 1000; i++) {
if (i % 50 == 0) {
$("body").append("<br>");
}
$("body").append("<span>" + parseInt(Math.abs(10 * Math.random() - 5 * Math.random())) + "</span>");
}
function color() {
function r() {
return Math.floor(Math.abs(255 * Math.random()));
}
return "rgb(" + r() + "," + r() + "," + r() + ")";
}
var spans, len;
var int = setInterval(function () {
spans = $("span");
len = spans.filter(function () {return $(this).html() != 0}).length;
if (window.console) console.log(len);
if (len == 0) {
spans.css("background", "lightgreen");
clearInterval(int);
return;
}
spans.each(function () {
if ($(this).html() != 0) {
$(this).html($(this).html() - 1);
} else {
this.style.background = color();
}
});
}, 1000);
});
</script>
|
| Часовой пояс GMT +3, время: 22:06. |