Мировые часы не обновляются с помощью Moment.js

Я новичок в moment.js и надстройке часового пояса. Надеюсь, это не повторяющаяся проблема, но у меня, кажется, есть некоторые проблемы с мировыми часами с использованием moment.js и moment-timezone.js, которые я пытаюсь сделать на странице, которая также использует highcharts. Я использую CodePen и локальную IDE и, похоже, получаю две разные ошибки с одним и тем же кодом. Говоря об этом, вот рассматриваемый код:

<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 я получаю 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/, чтобы фактически использовать местоположение, так что это не имеет смысла. В реальном приложении часы в Великобритании вообще не двигаются. Вот ссылка на codepen: https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111

Благодарю вас!


person G.Rose    schedule 31.08.2018    source источник
comment
Вы проверили stackoverflow.com/questions/33258908/   -  person dsych    schedule 31.08.2018
comment
@sychd Нет, но сейчас сделаю. Если это решит мою проблему, я удалю пост. Спасибо   -  person G.Rose    schedule 31.08.2018
comment
@sychd исправил мою ошибку в codepen, однако я все еще получаю ошибку moment(...).tz is not a function   -  person G.Rose    schedule 31.08.2018


Ответы (1)


Я понял. Оказывается, старые входные данные вызывали мои проблемы. Я использую несколько шаблонов Coldfusion, и в этот шаблон был импортирован устаревший скрипт. Спасибо хоть всем

person G.Rose    schedule 31.08.2018