В javascript есть всего две функции, которые позволяют отложить выполнение некоторого кода - это setTimeout и setInterval. Их удобнее всего использовать для отображения Ваших таймеров, потому что эти функции не дают гарантий, что вызов будет вовремя. То есть при каждой перерисовке таймера, нужно заново высчитывать, сколько прошло времени (с помощью объекта Date).
Синхронизация с реальным временем - тот еще гемор. Где его взять - это отдельный вопрос, я буду считать, что у Вас на сервере время эталонное. Таким образом, есть 2 времени - эталонное на сервере и локальное на компьютере. Локальное, ествественно, у каждого свое. К тому же локальные клиенты (их устройства) могут быть вообще настроены на другие часовые пояса. Поэтому стратегия такая:
1) При запуске запоминаем время начала работы скрипта. (объект Date)
2) получаем с сервера эталонное время (его можно вставить динамически прямо в тело скрипта при формировании страницы на сервере).
3) Смотрим разницу между эталонным и локальным.
Таким образом, мы в любой момент можем посчитать эталонное время на сервере, обращаясь лишь к локальному времени и прибавляя разницу. Каждая отрисовка таймера - это вычисление этого самого эталонного времени, и сопутствующие решения о том, какой таймер рисовать в данный момент.
Время удобнее всего хранить в секундах или в миллисекундах (timestamp, метка времени). Тогда это просто число, означающее момент в прошлом, настоящем или будущем.
Если нужна сверхточность до миллисекунд, то это двойной гемор - придется еще как-то определить пинг до сервера и прибавить его к разнице между локальным и эталонным временем.
|