Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Часы: время сервера на сайте

Отсебятина от 24 июля 2008 года.    Теги: Javascript Часы


Часы на сайте... Да, в большинстве случаев, это бесполезная требуха. Но встречаются и случаи, когда часы являются центром внимания на сайте. Например, ваш сайт является видео-каналом, где по расписанию идут передачи. Примеров может быть уйма, но самый удачный, пожалуй, сайт-лотерея. Помните розыгрыши от Lays.ru? Как вы думаете, сколько человек ждало наступления следующего часа с мыслями "А вдруг я буду в списке?".
Основной проблемой большинства часов на JS является локальность. То есть, время берется с часов у клиента. Но что если пользователь находится в другом часовом поясе или часы у него отстают на минут 5? Конечно, сайты, подобные Lays.ru наверняка учитывали это беря время с сервера, который, в свою очередь, сверялся с атомными часами, что не скажешь о сотнях других сайтов с часами (не будет вновь обсуждать, нужны ли они им).
Решением данной проблемы является автокорректировка локального времени в пределах самого сайта.
Схема такая - сервер передает временную метку, JS-скрипт сравнивает разницу и ей манипулирует при просчете времени.
Да, у данной схемы есть один минус - не учитывается время открытия страницы, пинг. Но, поверьте, скорость открытия нормальной страницы не превышает 60 секунд у dial-up'щиков.

var dateobj = new Date (); //Создаем объект даты-времени

/*
Ставим серверную метку времени через PHP (умножение на 1000, потому что mktime() возвращает время в секундах, а JS использует миллисекунды */

var servertime = <?php  echo mktime()*1000;  ?>;
var clienttime = dateobj.getTime(); //Получаем время клиента

raznica = servertime - clienttime; //Вычисляем разницу (без var для глобальности)

//Функция подсчета времени, которую необходимо вызывать каждую секунду
function timer() {

var dateobj = new Date (); //Создаем объект времени (каждую секунду он содержит другие свойства, а именно - другое время)


var correct = dateobj.getTime() + raznica; //Получаем откорректированную метку времени


dateobj.setTime(correct); //Ставим её в объект даты-времени


document.getElementById("dosya").innerHTML = dateobj.toLocaleTimeString(); //Вставляем время в элемент


setTimeout("timer("+raznica+")", 1000); //Вызываем функцию через 1000 миллисекунд

}

timer(); //Вызываем функцию (при загрузке страницы)
В html-страницы должно быть следующее:
<span id="dosya1"></span>

Немного другой вариант исполнения: он не корректирует время, если разница находится в интервале от 10 секунд до 1 минуты.
if (raznica > 7 || raznica < 60)

raznica = 0;


Вставлять после "raznica = servertime - clienttime;"
Аноним  03.04.2012 в 17:24
Не работает.
den  25.07.2012 в 23:48
Потрясно. Синхронизация есть.
music  01.07.2013 в 12:49
тоже не смог заставить работать, ищем дальше...
Аноним  23.01.2015 в 15:56
тоже не смог заставить работать, ищем дальше...

-------------------------

Чем заставлял? Замени <span id="dosya1"></span> на <span id="dosya"></span>.

Аноним  23.01.2015 в 15:57
тоже не смог заставить работать, ищем дальше...

-------------------------

Чем заставлял? Замени <span id="dosya1"></span> на <span id="dosya"></span>.

Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его