Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2014, 08:39
Аватар для TuxShot
Новичок на форуме
Отправить личное сообщение для TuxShot Посмотреть профиль Найти все сообщения от TuxShot
 
Регистрация: 01.12.2013
Сообщений: 9

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

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

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

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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2014, 09:32
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,435

UNIX time и так понятен для JS, но JS отмеряет в миллисекундах, а не в секундах.
alert(new Date(2147483648 * 1000));
alert(new Date(1000000000 * 1000));


Собственно для таймера используй setInterval, но учти, что он неточен, а в некоторых браузерах резко притормаживается при переключении вкладки. Делай корректировку каждую определенную итерацию и при получении страницей фокуса.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2014, 09:41
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 18.01.2010
Сообщений: 354

Не поверишь! 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);
	}

}());

Последний раз редактировалось ixth, 02.08.2014 в 09:43. Причина: Заменил getHours на getUTCHours etc.
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2014, 11:55
Аватар для TuxShot
Новичок на форуме
Отправить личное сообщение для TuxShot Посмотреть профиль Найти все сообщения от TuxShot
 
Регистрация: 01.12.2013
Сообщений: 9

Сообщение от 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. Если я его ставлю таймер стартует вообще с одной минуты.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2014, 12:34
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 18.01.2010
Сообщений: 354

Хммм… Не знаю в чем ошибка, но зря ты используешь вот такое:
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>
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2014, 19:00
Аватар для TuxShot
Новичок на форуме
Отправить личное сообщение для TuxShot Посмотреть профиль Найти все сообщения от TuxShot
 
Регистрация: 01.12.2013
Сообщений: 9

Сообщение от 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")

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

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

Спасибо еще раз.
ТЕМА ЗАКРЫТА
Ответить с цитированием
  #7 (permalink)  
Старый 03.08.2014, 12:36
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 18.01.2010
Сообщений: 354

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Зацикленный таймер обратного отсчета levshaszr Элементы интерфейса 7 12.10.2014 22:20
#help Таймер обратного отсчета и куки poroxprod Общие вопросы Javascript 0 11.04.2014 13:46
таймер обратного отсчета в формате (H, m, s) mozgs Общие вопросы Javascript 1 22.12.2013 13:46
Графический таймер обратного отсчета bobri4 Элементы интерфейса 4 24.08.2009 21:50
таймер обратного отсчета Mignon Общие вопросы Javascript 1 07.06.2008 16:16