Таймер до события
 

Здравствуйте ув. Форумчане. Подскажите, пожалуйста, как реализовать следующее:

Необходим таймер который бы вел отсчет до определенного события, после чего вел отсчет времени сколько оно идет, а по окончании события опять вел отсчет времени до его начала.

Пояснение:
Событие в 18:00 идет 1 час
1. Отсчет времени до 18:00
2. По достижении 18:00 "прямой" отсчет 1 часа.
3. После отсчета 1 часа, включение отсчета времени до 18:00

Причем синхронизация должна быть с реальным временем. И желательно при всём этом учесть, что часовые пояса могут быть разные.

Таймеров таких на странице предполагается до 12 шт.

Буду очень благодарен, если вы объясните, как это сделать. Я совсем новичок в js. И буду очень признателен за подробное объяснение реализации.

date = new Date();
там есть разные методы, погуглите

эээ... гуглил. не помогает =(

масса таймеров... но хотя бы примера с тем что мне надо нет(

масса таймеров? хм.. приведите мне хотя бы 5..

1
2
3
....

Продолжать?

А что там мелочиться вот вам 25 таймеров =)

Извините, но я тему создал, что бы спросить совета, и помощи….
А тут….

таймера всего 2. это setTimeout и setInterval. больше не существует!
разница между ними только в том что в setTimeout по истечении времени вызывается функция и таймер больше не работает. а в setInterval после вызова функции опять таймер запускается. т.е. он работает бесконечно. setInterval останавливают вручную.

var date = new Date(); - текущая дата и время
если эту функцию вызвать через промежуток времени и сделать разницу, то можно вычеслить кол-во сек между вызовами этих функций.

вы писали: "Необходим таймер который бы вел отсчет до определенного события".. можно пример этого события? нажатие кнопки или по окончанию времени программно нажать на кнопку?

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

нет, извените, я не правильно выразился наверное… событие, это просто событие… как в примере, просто 18:00. Событие должно произойти где – то, ну к примеру конец пары. На странице просто меняется время как в примере:
Событие в 18:00 идет 1 час
1. Отсчет времени до 18:00
2. По достижении 18:00 "прямой" отсчет 1 часа.
3. После отсчета 1 часа, включение отсчета времени до 18:00

нет я просил совета, как это сделать, а меня попросили найти определенное количество того что я уже нашел =)

используйте
setInterval(function()
{
var date = new Date();
//... достаете из даты нужные параметры (часы минуты) и дальше условие. если время за 18, то.. выполнить какие то действия

}, 10000); //вызывать 1 раз в 10 сек

Спасибо. буду пробовать! Ещё один вопрос. На обной странице, будет много подобных счетчиков. Не случится ли конфликта, если я буду дублировать один код изменяя данные под каждый случай? Или стоит стараться сразу в один код включить все, что мне нужно, а не по отдельности?

если будете обращаться к одной переменной, то может и будет конфликт.. а если не будете то и конфликта не будет..
var a = 0;

setInterval(function()
{
a = 5;
}, 4000);

setInterval(function()
{
a = 10;
}, 3500);

setInterval(function()
{
console.log(a);
}, 1000);

здесь будет конфликт. переменная будет менять свое значение то на 5 то на 10

спасибо! :)

В javascript есть всего две функции, которые позволяют отложить выполнение некоторого кода - это setTimeout и setInterval. Их удобнее всего использовать для отображения Ваших таймеров, потому что эти функции не дают гарантий, что вызов будет вовремя. То есть при каждой перерисовке таймера, нужно заново высчитывать, сколько прошло времени (с помощью объекта Date).

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

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

Время удобнее всего хранить в секундах или в миллисекундах (timestamp, метка времени). Тогда это просто число, означающее момент в прошлом, настоящем или будущем.

Если нужна сверхточность до миллисекунд, то это двойной гемор - придется еще как-то определить пинг до сервера и прибавить его к разнице между локальным и эталонным временем.