Таймер с часовыми поясами

258
12 декабря 2016, 10:05

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

<script src="http://e-timer.ru/js/etimer.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".eTimer").eTimer({
            etType: 0, etDate: "14.04.2015.20.0", etTitleText: "До начала турнира осталось:", etTitleSize: 16, etShowSign: 1, etSep: ":", etFontFamily: "Trebuchet MS", etTextColor: "#faee00", etPaddingTB: 1, etPaddingLR: 2, etBackground: "rgba(0, 0, 0, 0.3)", etBorderSize: 0, etBorderRadius: 2, etBorderColor: "#020101", etShadow: " 0px 0px 10px 0px black", etLastUnit: 4, etNumberFontFamily: "Impact", etNumberSize: 35, etNumberColor: "#ffda00", etNumberPaddingTB: 0, etNumberPaddingLR: 8, etNumberBackground: "rgba(0, 0, 0, 0.61)", etNumberBorderSize: 0, etNumberBorderRadius: 5, etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5)"
        })
    });
</script>
Answer 1

Задайте дату через конструктор Date с указанием московского часового пояса. Браузер применит смещение часового пояса самостоятельно.

var d = new Date('2015-04-14T20:00:00+03:00');
jQuery(document).ready(function() {
    jQuery(".eTimer").eTimer({
        etType: 0, 
        etDate: [d.getDate(), d.getMonth() + 1, d.getFullYear(), d.getHours(), d.getMinutes()].join('.'),
        etTitleText: "До начала турнира осталось:", etTitleSize: 16, etShowSign: 1, etSep: ":", etFontFamily: "Trebuchet MS", etTextColor: "#faee00", etPaddingTB: 1, etPaddingLR: 2, etBackground: "rgba(0, 0, 0, 0.3)", etBorderSize: 0, etBorderRadius: 2, etBorderColor: "#020101", etShadow: " 0px 0px 10px 0px black", etLastUnit: 4, etNumberFontFamily: "Impact", etNumberSize: 35, etNumberColor: "#ffda00", etNumberPaddingTB: 0, etNumberPaddingLR: 8, etNumberBackground: "rgba(0, 0, 0, 0.61)", etNumberBorderSize: 0, etNumberBorderRadius: 5, etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5)"
    })
});
Answer 2

Совет Ivan Solntsev формально правильный, но по сути - совсем не верный.

Если решать задачу так, как предлагаете вы, то турнир начнётся для каждого пользователя тогда, когда этот пользователь (ну, приложение на клиент-сайде) будет думать что наступило 20.00 в +3 часовом поясе. Но это не значит, что в этот момент на самом деле будет 20.00 так как вам никто не гарантирует, что установлено правильное время на компьютере пользователя.

Так как по условию задачи "турниры должны начинаться каждый раз в 20-00 по московскому времени" то приложение на клиент-сайде должно узнать об этот из своего общения с сервером. Т.е. сервер должен принять решение, что турнир начался. И уведомить об этом клиентов (websockets) или приложение должно периодически осведомляться (ajax).

READ ALSO
Неожиданное поведение jQuery AJAX в Windows XP

Неожиданное поведение jQuery AJAX в Windows XP

Здравствуйте! Столкнулся с такой интересной проблемой, есть некая веб-форма, данные которой передаются в фоне скрипту на php посредством jQuery...

283
Как получить доступ к элементу background?

Как получить доступ к элементу background?

Добрый день, подскажите, пожалуйста, как можно решить следующую задачу

264
Почему jQuery countTo timer показывает только 100?

Почему jQuery countTo timer показывает только 100?

Всем привет! Подключаю плагин: https://githubcom/mhuggins/jquery-countTo/blob/master/readme

338