世界时钟未使用Moment.js更新

时间:2018-08-31 14:49:58

标签: javascript jquery momentjs moment-timezone

我是moment.js和时区附加组件的新手。希望这不是重复的问题,但是我似乎在尝试使用也在使用highcharts的页面上使用moment.js和moment-timezone.js创建世界时钟时遇到了一些问题。我正在使用CodePen和本地IDE,并且似乎在使用同一代码时遇到两个不同的错误。说到其中,这是有问题的代码:

foreach(element in list){
    if(!string.isEmpty(element.NameVariable)){
        FavoriteImage = "favoriteded.png";
    }else{
        FavoriteImage = "favorite.png";
    }
}

这是jquery:

<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>

可能并不重要,我知道它存在一些重叠的问题,但这是CSS:

$(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();
});

在Chrome开发人员工具上,我得到了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; } ,在CodePen上,我得到了moment(...).tz is not a function,我使用了http://momentjs.com/timezone/上的地图来实际使用该位置,因此这没有任何意义。在实际的应用程序上,英国的时钟根本没有动。这是指向密码笔的链接:https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111

谢谢!

1 个答案:

答案 0 :(得分:0)

我知道了。原来是较旧的输入引起了我的问题。我正在使用某些Coldfusion模板,并且该模板导入了过时的脚本。谢谢大家