我是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
谢谢!
答案 0 :(得分:0)
我知道了。原来是较旧的输入引起了我的问题。我正在使用某些Coldfusion模板,并且该模板导入了过时的脚本。谢谢大家