Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 30.06.2013, 02:54
Интересующийся
Отправить личное сообщение для Aeliot Посмотреть профиль Найти все сообщения от Aeliot
 
Регистрация: 18.05.2013
Сообщений: 22

Всем большое спасибо за помощь. Работает.
Выкладываю то, что получилось.

Скрипт:
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;
}


Если будут предложения по улучшению кода, с радостью прислушаюсь и буду использовать себе во благо.
Ответить с цитированием
  #32 (permalink)  
Старый 30.06.2013, 03:58
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Вродь такая отображалка - попроще ?
<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>

Последний раз редактировалось Deff, 30.06.2013 в 08:48.
Ответить с цитированием
  #33 (permalink)  
Старый 30.06.2013, 06:47
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Aeliot
var el_out = els[i].querySelectorAll('.time_show');
32
        el_out[0].innerHTML = t_out;
можно так
var el_out = els[i].querySelector('.time_show');
el_out.innerHTML = t_out;
Ответить с цитированием
  #34 (permalink)  
Старый 30.06.2013, 09:26
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

так кто-нибудь остановит этот таймер
Ответить с цитированием
  #35 (permalink)  
Старый 30.06.2013, 09:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от bes
так кто-нибудь остановит этот таймер
Ну пока он не красив, нужен стек и добавка изъятие из очереди.

По таймеру опрашиваем стек, уменьшаем времена в стеке и выводим, по значению 0 в стеке, очищаем очередь от этого элемента и проверяем стек на нулевую длину, при 0 - сбрасываем таймер.
Собственно задача добавки/изъятия из стека по требованию(тут желательно упорядочить стек по увеличению остаточного времени), нун её добить, поскольку тут возникает и требование повторного перезапуска

Последний раз редактировалось Deff, 30.06.2013 в 09:51.
Ответить с цитированием
  #36 (permalink)  
Старый 30.06.2013, 16:47
Интересующийся
Отправить личное сообщение для Aeliot Посмотреть профиль Найти все сообщения от Aeliot
 
Регистрация: 18.05.2013
Сообщений: 22

Сообщение от vadim5june Посмотреть сообщение
можно так
var el_out = els[i].querySelector('.time_show');
el_out.innerHTML = t_out;
Спасибо. Я читал об этом ночью, но что-то не отложилось.

Сообщение от bes Посмотреть сообщение
так кто-нибудь остановит этот таймер
В данном случае (моём), думается, это не принципиально. Таймеры обычно выставляются на 1-3 суток. Все просроченные просто не выводятся при формировании страницы в php. А как долго пользователь находится на странице не обновляя её? 20 секунд? 1-2 минуты? Пусть даже час она провесит у него не обновляясь... Ну закончатся пара таймеров. Это совсем мелкая нагрузка по сравнению в ещё парой сотен таймеров. Это конечно же подход не супер-пупер, но на первое время сойдёт. Кстати, сегодня запустил около 300-а таймеров на одной странице. Всё работает просто огонь.

Сообщение от Deff Посмотреть сообщение
Ну пока он не красив, нужен стек и добавка изъятие из очереди.

По таймеру опрашиваем стек, уменьшаем времена в стеке и выводим, по значению 0 в стеке, очищаем очередь от этого элемента и проверяем стек на нулевую длину, при 0 - сбрасываем таймер.
Собственно задача добавки/изъятия из стека по требованию(тут желательно упорядочить стек по увеличению остаточного времени), нун её добить, поскольку тут возникает и требование повторного перезапуска
Это всё конечно же супер, но из-за отсутствия должных знаний сам такого не напишу. Если допилите для общего пользования, думаю, многие скажут вам спасибо.

Последний раз редактировалось Aeliot, 30.06.2013 в 16:51.
Ответить с цитированием
  #37 (permalink)  
Старый 30.06.2013, 18:59
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

ладно, сам остановлю
<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>

Последний раз редактировалось bes, 30.06.2013 в 19:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Много таймеров на одной странице pimple2006 Элементы интерфейса 21 27.10.2015 08:06
Несколько таймеров на одной странице. Pothead Общие вопросы Javascript 1 27.05.2013 08:24
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Как сделать 2 галереи JQuery на одной странице? orendzi jQuery 8 16.07.2011 15:22
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46