Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   До конца события осталось (Jquery) (https://javascript.ru/forum/project/46941-do-konca-sobytiya-ostalos-jquery.html)

Norm Iridium 30.04.2014 18:50

До конца события осталось (Jquery)
 
Написал на днях, может кому пригодится.
Сервер отдает время конца акции:
<b data-time="1398880830"></b><br/>
<b data-time="1398870821"></b>

Уменьшение счетчика:
<script>
String.prototype.plural = Number.prototype.plural = function(a, b, c) {
	var index = this % 100;
	index = (index >=11 && index <= 14) ? 0 : (index %= 10) < 5 ? (index > 2 ? 2 : index): 0;
	return(this+[a, b, c][index]);
}
function downtimers(){
	$('[data-time]').each(function(){
		var s = parseInt($(this).data('time'))-parseInt(new Date().getTime()/1000);
		if(s<0) 
			$(this).text('акция закончилась');
		else{
			s-=(d=Math.floor(s/60/60/24))*24*60*60;
			s-=(h=Math.floor(s/60/60))*60*60;
			s-=(m=Math.floor(s/60))*60;			
			$(this).text(
				(d<10?'0'+d:d).plural(" дней "," день "," дня ")+
				(h<10?'0'+h:h).plural(" часов "," час "," часа ")+
				(m<10?'0'+m:m).plural(" минут "," минута "," минуты ")+
				(s<10?'0'+s:s).plural(" секунд "," секунда "," секунды ")
			);
		}
	});
}
downtimers();
setInterval(downtimers,1000);
</script>

BETEPAH 30.04.2014 23:16

я бы предложил заменить 9ю строку на:
var arr = $(this).data('time').split(/[^0-9]/);
var s = Math.floor(((new Date (arr[0], arr[1]-1, arr[2])).getTime() - (new Date().getTime())) / 1000);

и дату события указывать в удобном для человека формате:
<b data-time="2014-08-23"></b>

Norm Iridium 01.05.2014 00:17

BETEPAH,
ещё неплохо вынести $('[data-time]') из таймера определив переменной выше, накладные затраты на поиск каждый раз исчезнут. Дату сделал с вариантом. За Math.floor спасибо, так лучше.

<b data-time="2014-05-01 0:55:00"></b><br>
<b data-time="2014-05-01"></b>

<script>
String.prototype.plural = Number.prototype.plural = function(a, b, c) {
	var index = this % 100;
	index = (index >=11 && index <= 14) ? 0 : (index %= 10) < 5 ? (index > 2 ? 2 : index): 0;
	return(this+[a, b, c][index]);
}
$datatime=$('[data-time]');
function downtimers(){
	$datatime.each(function(){
		var d,h,m;
		var t = $(this).data('time').split(/[^0-9]/);
		var s = Math.floor(((new Date (t[0], t[1]-1, t[2], t[3]?t[3]:0, t[4]?t[4]:0, t[5]?t[5]:0)).getTime() - (new Date().getTime())) / 1000);
		if(s<0) 
			$(this).text('акция закончилась');
		else{
			s-=(d=Math.floor(s/60/60/24))*24*60*60;
			s-=(h=Math.floor(s/60/60))*60*60;
			s-=(m=Math.floor(s/60))*60;			
			$(this).text(
				(d<10?'0'+d:d).plural(" дней "," день "," дня ")+
				(h<10?'0'+h:h).plural(" часов "," час "," часа ")+
				(m<10?'0'+m:m).plural(" минут "," минута "," минуты ")+
				(s<10?'0'+s:s).plural(" секунд "," секунда "," секунды ")
			);
		}
	});
}
downtimers();
setInterval(downtimers,1000);
</script>

BETEPAH 01.05.2014 01:07

Цитата:

Сообщение от Norm Iridium
ещё неплохо вынести $('[data-time]') из таймера определив переменной выше

Ну, я особо в Ваш код не вмешивался, но раз стал вопрос, я скорее сделал бы этот таймер jQuery.fn-плагином и дату задавал бы в опциях к нему.


Часовой пояс GMT +3, время: 23:19.