Как использовать moment.JS для определенного часового пояса и отображать его в реальном времени

Как мне использовать библиотеку Moment.JS для международного часового пояса и отображать ее в режиме реального времени?

Это то, что у меня есть на моей индексной странице.

Код:

<!DOCTYPE html>
<html>
<head>
<script src="moment.js"></script>
<script src="moment-timezone.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    moment().tz("America/Los_Angeles").format();
    document.getElementById("time").firstChild.data = moment().format('hh:mm:ss a')
</script>
</head>
<body>
    <span id="time">s</span>
</body>
</html>

Это мой первый раз, когда я использую MomentJS, и я не знаю, правильно ли я реализовал его и отображал ли он его в режиме реального времени без постоянного обновления страницы.


javascript timer momentjs
person Jeiman    schedule 13.09.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вам не хватает фактических данных зоны. Перейдите в построитель данных о моменте и часовом поясе и укажите нужные вам зоны. Поместите это в другой файл с именем moment-timezone-data.js и включите его или поместите в существующий скрипт. См. эти документы.

Чтобы обновлять его в режиме реального времени, вам необходимо регулярно обновлять элемент.

Кроме того, в вашем примере кода, когда вы впервые вызываете момент с часовым поясом, вы отбрасываете ответ. Второй звонок, вы не используете часовой пояс. И вам здесь не нужен jQuery.

Собираем все вместе:

function showTheTime() {
    var s = moment().tz("America/Los_Angeles").format('hh:mm:ss a');    
    document.getElementById("time").innerHTML = s;
}

showTheTime(); // for the first load
setInterval(showTheTime, 250); // update it periodically

Вы можете подумать, что установить интервал в 1000 мс будет нормально, но вы можете обнаружить, что визуально он не проходит гладко. Это происходит потому, что интервальный таймер может не совпадать с реальными часами. Лучше обновлять несколько раз в секунду.

person Matt Johnson-Pint    schedule 13.09.2013
comment
Я сделал все шаги, которые вы сказали мне сделать, но, похоже, это не работает. В моем элементе span нужно ли мне вызывать какой-либо конкретный метод из скрипта? На данный момент это то, что у меня есть. ‹span id=time›test‹/span›. По праву он должен просто перезаписать «тест» часовым поясом, верно? - person Jeiman; 13.09.2013
comment
Да, он перезапишет все, что там находится, строкой времени рендеринга. Вам может понадобиться вызвать этот код после определения диапазона или из чего-то вроде ready, если вы используете jQuery. - person Matt Johnson-Pint; 14.09.2013
comment
Это работает, большое спасибо. Почему в некоторых случаях некоторые javascripts не работают до тех пор, пока не появятся некоторые элементы внутри тега body? - person Jeiman; 14.09.2013
comment
JavaScript выполняется последовательно по мере его обнаружения. Если вы попытаетесь получить доступ к элементу до его загрузки, он его не найдет. Вы можете размещать вещи раньше, если полагаетесь на событие onLoad, или событие ready jQuery, или что-то в этом роде. Но если вы просто запустите его в строке, он должен появиться после определения элемента. - person Matt Johnson-Pint; 14.09.2013
comment
Я вижу Ок. Еще раз спасибо за советы и решение. - person Jeiman; 14.09.2013
comment
Для тех, кому не требуется информация о секундах в реальном времени, а просто нужно обновлять отображение раз в минуту: jsfiddle.net/ws45S Таким образом, значение обновляется синхронно с часами пользователя и только один раз в минуту вместо 4 раз в секунду. - person Robert Paulson; 07.10.2013
comment
@Matt Johnson, как заставить это работать в любом другом часовом поясе? в настоящее время он говорит Coming soon... в предоставленной вами ссылке на построитель данных о моменте и часовом поясе - person HattrickNZ; 15.12.2015
comment
сработал с помощью здесь Don't load moment-timezone-with-data and then use moment.tz.add, as that just duplicates the zone information that's already in the data file вот скрипка - пришлось добавить источник, удалить источник и закомментировать moment.tz.add часть. - person HattrickNZ; 15.12.2015