Мировые часы не обновляются с Moment.js
Я новичок в moment.js и дополнение к часовому поясу. Надеюсь, это не повторяющаяся проблема, но у меня, кажется, есть некоторые проблемы с мировыми часами, использующими moment.js и moment-timezone.js, которые я пытаюсь создать на странице, которая также использует высокие графики. Я использую CodePen и локальную среду разработки и, похоже, получаю две разные ошибки с одним и тем же кодом. Говоря об этом, вот код, о котором идет речь:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone.min.js"></script>
<label>Texas
<div id = "USclock" class="circle">
<div class="face">
<div id="UShour" class="hour"></div>
<div id="USminute" class="minute"></div>
<div id="USsecond" class="second"></div>
</div>
</div>
</label>
<label> Staffordshire, United Kingdom
<div id = "Ukclock" class="circle">
<div class="face">
<div id="UKhour" class="hour"></div>
<div id="UKminute" class="minute"></div>
<div id="UKsecond" class="second"></div>
</div>
</div>
</label>
А вот и JQuery:
$(function() {
function updateClockUS(){
var now = moment(),
second = now.seconds() * 6,
minute = now.minutes() * 6 + second / 60,
hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
$('#UShour').css("transform", "rotate(" + hour + "deg)");
$('#USminute').css("transform", "rotate(" + minute + "deg)");
$('#USsecond').css("transform", "rotate(" + second + "deg)");
}
function timedUpdate () {
updateClockUS();
setTimeout(timedUpdate, 1000);
}
timedUpdate();
});
$(function() {
function updateClockUK(){
var now = moment().tz("Europe/London"),
second = now.seconds() * 6,
minute = now.minutes() * 6 + second / 60,
hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
$('#UKhour').css("transform", "rotate(" + hour + "deg)");
$('#UKminute').css("transform", "rotate(" + minute + "deg)");
$('#UKsecond').css("transform", "rotate(" + second + "deg)");
}
function timedUpdate () {
updateClockUK();
setTimeout(timedUpdate, 1000);
}
timedUpdate();
});
Может быть, это не важно, и я знаю, что есть некоторые проблемы с этим, но вот CSS:
label {
top: 10%;
right: 10%;
font-size: 30px;
position:fixed;
display: inline-block;
}
.circle {
display: block;
width: 160px;
height: 160px;
margin-top: 10px;
margin-left: -15px;
position: relative;
border: 8px solid black;
border-radius: 50%;
}
.circle .face {
width: 100%;
height: 100%;
}
.circle .face:after {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
background: black;
border-radius: 6px;
content: "";
display: block;
}
.circle .face .hour, .circle .face .minute, .circle .face .second {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
background: black;
border-radius: 4px 0 0 4px;
}
.circle .face .minute, .circle .face .second {
transform-origin: 50% 100%;
}
.circle .face .hour {
margin: -4px 0 -4px -25%;
padding: 4px 0 4px 25%;
transform-origin: 100% 50%;
}
.circle .face .minute {
margin: -40% -3px 0;
padding: 40% 3px 0;
}
.circle .face .second {
margin: -40% -1px 0 0;
padding: 40% 1px 0;
}
На Chrome Developer Tools я получаю moment(...).tz is not a function
и на CodePen я получаю "Moment Timezone has no data for Europe/London. See http://momentjs.com/timezone/docs/#/data-loading/."
Я использовал карту на http://momentjs.com/timezone/ чтобы фактически использовать местоположение, поэтому оно не имеет смысла. На самом приложении британские часы не двигаются вообще. Вот ссылка на кодовую ручку: https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111
Спасибо!
1 ответ
Я понял. Оказывается, более старая информация была причиной моих проблем. Я использую некоторые шаблоны Coldfusion, и в этом шаблоне был импортирован устаревший скрипт. Спасибо всем