Таймер обратного отсчета UNIX time
Здравствуйте.
Помогите с таймером обратного отсчета. Есть такая реализация: PHP создает cookie со значением UNIX time + 1 день. Нужен анимированный таймер обратного отчета: Осталось 23 ч. 15 мин. 59 сек. (например) Я не знаю как конвертировать UNIX time в понятную для JS форму и получить разность UNIX time + 1 день минус UNIX time текущий. Спасибо! |
UNIX time и так понятен для JS, но JS отмеряет в миллисекундах, а не в секундах.
alert(new Date(2147483648 * 1000)); alert(new Date(1000000000 * 1000)); Собственно для таймера используй setInterval, но учти, что он неточен, а в некоторых браузерах резко притормаживается при переключении вкладки. Делай корректировку каждую определенную итерацию и при получении страницей фокуса. |
Не поверишь! 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. Если я его ставлю таймер стартует вообще с одной минуты. |
Хммм… Не знаю в чем ошибка, но зря ты используешь вот такое:
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")
ставила неправильное время, точнее не мой часовой пояс. Конфиги сервера бесполезно крутить. Т.к пользователи находятся в разных поясах. Поэтому проще брать их локальное время компьютеров и записывать его в куки и уже по ним вычитывать разность. Только после создании куки с локальном временем все заработало. Спасибо еще раз. ТЕМА ЗАКРЫТА |
Ммм… Нет, не закрыта.
Разве timestamp не одинаковый для разных часовых поясов? |
| Часовой пояс GMT +3, время: 20:57. |