Форум

TuxShot · #1 (**permalink**) 02.08.2014, 09:39

Здравствуйте.
Помогите с таймером обратного отсчета.

Есть такая реализация:
PHP создает cookie со значением UNIX time + 1 день.

Нужен анимированный таймер обратного отчета:
Осталось 23 ч. 15 мин. 59 сек. (например)

Я не знаю как конвертировать UNIX time в понятную для JS форму и получить разность UNIX time + 1 день минус UNIX time текущий.

Спасибо!

Erolast · #2 (**permalink**) 02.08.2014, 10:32

UNIX time и так понятен для JS, но JS отмеряет в миллисекундах, а не в секундах.

alert(new Date(2147483648 * 1000));
alert(new Date(1000000000 * 1000));

Собственно для таймера используй setInterval, но учти, что он неточен, а в некоторых браузерах резко притормаживается при переключении вкладки. Делай корректировку каждую определенную итерацию и при получении страницей фокуса.

ixth · #3 (**permalink**) 02.08.2014, 10:41

Не поверишь! timestamp парсится на раз:

(function () {
	//var targetDate = Number($.cookie('timestamp')) * 1000;
	var targetDate = 1406975960000;

	setInterval(function () {
		updateTimer();
	}, 1000);

	function updateTimer() {
		var now = new Date();
		var diff = new Date(targetDate - now);
		updateTimerView(diff.getUTCHours(), diff.getUTCMinutes(), diff.getUTCSeconds());
	}

	function updateTimerView(hours, minutes, seconds) {
		// Тут делаешь анимацию
		console.log('%s:%s:%s', hours, minutes, seconds);
	}

}());

TuxShot · #4 (**permalink**) 02.08.2014, 12:55

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

Не поверишь! timestamp парсится на раз:

(function () {
	//var targetDate = Number($.cookie('timestamp')) * 1000;
	var targetDate = 1406975960000;

	setInterval(function () {
		updateTimer();
	}, 1000);

	function updateTimer() {
		var now = new Date();
		var diff = new Date(targetDate - now);
		updateTimerView(diff.getUTCHours(), diff.getUTCMinutes(), diff.getUTCSeconds());
	}

	function updateTimerView(hours, minutes, seconds) {
		// Тут делаешь анимацию
		console.log('%s:%s:%s', hours, minutes, seconds);
	}

}());

Немного переделал (добавил) код:

var targetDate = 1407055666;
var now = Math.round(new Date().getTime());
var diff = targetDate - now;
function UpdateTime() {
function pad(num) {
return num > 9 ? num : '0'+num;
};
days = Math.floor( diff / (1000*60*60*24) ),
hours = Math.floor( diff / (1000*60*60) ),
mins = Math.floor( diff / (1000*60) ),
secs = Math.floor( diff / 1000 ),
hh = hours - days * 24,
mm = mins - hours * 60,
ss = secs - mins * 60;
displaytime = pad(hh) + ':' +  pad(mm) + ':' + pad(ss);
document.getElementById("countdown_time").innerHTML = displaytime;
diff -= 1000;
}
setInterval(UpdateTime, 1000);
document.write(targetDate+' - '+now+' = '+diff); //debug вывод какие значения попадают

Но проблема в том, что постоянно таймер стартует не с 23:59:59, а с 22:02:12.
Проблему я нашел в строчке debug.
Оказалась разность даты + 1 день и текущей даты равно отрицательному значению.

Функция добавления в cookie даты + 1 день такая:

strtotime("+1 day")

Но вот как исправить ошибку я что-то не пойму.

P.S. Только не говорите что в переменной

var now = Math.round(new Date().getTime());
я не поставил деление на 1000. Если я его ставлю таймер стартует вообще с одной минуты.

ixth · #5 (**permalink**) 02.08.2014, 13:34

Хммм… Не знаю в чем ошибка, но зря ты используешь вот такое:

days = Math.floor( diff / (1000*60*60*24) ),

В js есть объект Date, у которого есть методы, отдающие часы, минуты и т.д.

Вот это — незаметная ошибка:

diff -= 1000;

setInterval вызывается не раз в секунду, а как попало. Ну, точнее, как повезет. Рано или поздно, твой счетчик начнет отставать. now и diff нужно получать при каждом вызове, это не смертельно.

Попробуй вот этот код, у меня он работает правильно:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="countdown_time"></div>
	<script>
		var targetDate = getDate();
		setInterval(updateTime, 1000);

		function updateTime() {
			var diff = new Date(targetDate - new Date());

			var hours = diff.getUTCHours();
			var mins = diff.getUTCMinutes();
			var secs = diff.getUTCSeconds();
			var displaytime = pad(hours) + ':' +  pad(mins) + ':' + pad(secs);

			document.getElementById("countdown_time").innerHTML = displaytime;
		}

		function getDate() {
			var date = new Date();
			date.setDate(date.getDate() + 1);
			return date;
		}

		function pad(num) {
			return num > 9 ? num : '0' + num;
		}
	</script>
</body>
</html>

TuxShot · #6 (**permalink**) 02.08.2014, 20:00

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

Хммм… Не знаю в чем ошибка, но зря ты используешь вот такое:

days = Math.floor( diff / (1000*60*60*24) ),

В js есть объект Date, у которого есть методы, отдающие часы, минуты и т.д.

Вот это — незаметная ошибка:

diff -= 1000;

setInterval вызывается не раз в секунду, а как попало. Ну, точнее, как повезет. Рано или поздно, твой счетчик начнет отставать. now и diff нужно получать при каждом вызове, это не смертельно.

Попробуй вот этот код, у меня он работает правильно:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="countdown_time"></div>
	<script>
		var targetDate = getDate();
		setInterval(updateTime, 1000);

		function updateTime() {
			var diff = new Date(targetDate - new Date());

			var hours = diff.getUTCHours();
			var mins = diff.getUTCMinutes();
			var secs = diff.getUTCSeconds();
			var displaytime = pad(hours) + ':' +  pad(mins) + ':' + pad(secs);

			document.getElementById("countdown_time").innerHTML = displaytime;
		}

		function getDate() {
			var date = new Date();
			date.setDate(date.getDate() + 1);
			return date;
		}

		function pad(num) {
			return num > 9 ? num : '0' + num;
		}
	</script>
</body>
</html>

Да, спасибо все работает.
Оказалась проблема была в...ЧАСОВОМ ПОЯСЕ.
Как это ни странно покажется, но у меня только при создании cookie с Unux time = GMT +0 заработал таймер.

Пришлось "печеньке скормить" эту функцию:

function nowtime(){
var nowtime = Math.round(new Date().getTime() + 1/1000.0);
document.getElementById("nowtime").value = nowtime ;
}
setInterval(nowtime, 1000);

Потому что PHP-функция

strtotime("+1 day")

ставила неправильное время, точнее не мой часовой пояс.
Конфиги сервера бесполезно крутить. Т.к пользователи находятся в разных поясах. Поэтому проще брать их локальное время компьютеров и записывать его в куки и уже по ним вычитывать разность.

Только после создании куки с локальном временем все заработало.

Спасибо еще раз.
ТЕМА ЗАКРЫТА

ixth · #7 (**permalink**) 03.08.2014, 13:36

Ммм… Нет, не закрыта.

Разве timestamp не одинаковый для разных часовых поясов?

Форум

Справочник

Discord чат

Курсы javascript