在JavaScript模擬時鐘中使用時刻時區

Question

無法讓時刻時區在模擬時鐘上工作。想要獲得時鐘顯示洛杉磯時間。時鐘適用於「新日期（）」而不是「moment.tz（」America/Los_Angeles「）」。使用文本格式時鐘時庫功能正常。

Codepen

JS

var canvas = document.getElementById("clock"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height/2; 
ctx.translate(radius, radius); 
setInterval(drawClock, 1000); 

function drawClock() { 
ctx.clearRect(-radius, -radius, canvas.width, canvas.height); 
drawNumbers(ctx, radius); 
drawTime(ctx, radius); 
} 

function drawNumbers(ctx, radius) { 
var ang; 
var num; 
ctx.font = 14 + "px arial"; 
ctx.textBaseline="middle"; 
ctx.textAlign="center"; 
for(num = 1; num < 13; num++){ 
    ang = num * Math.PI/6; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.80); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.80); 
    ctx.rotate(-ang); 
    } 
} 

function drawTime(ctx, radius){ 
var timestamp = moment.tz("America/Los_Angeles"); 
var hour = timestamp.getHours(); 
var minute = timestamp.getMinutes(); 
var second = timestamp.getSeconds(); 
//hour 
hour=hour%12; 
hour=(hour*Math.PI/6)+ 
(minute*Math.PI/(6*60))+ 
(second*Math.PI/(360*60)); 
drawHand(ctx, hour, radius*0.5, radius*0.07); 
//minute 
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
drawHand(ctx, minute, radius*0.7, radius*0.07); 
} 

function drawHand(ctx, pos, length, width) { 
ctx.beginPath(); 
ctx.lineWidth = width; 
ctx.lineCap = "round"; 
ctx.moveTo(0,0); 
ctx.rotate(pos);ctx.lineTo(0, -length); 
ctx.stroke(); 
ctx.rotate(-pos); 
} 

Answer 1

使用時moment您正在尋找的功能都沒有getHours，getMinutes，getSeconds，但只有hours，minutes，seconds：

var timestamp = moment.tz("America/Los_Angeles"); 
var hour = timestamp.hours(); 
var minute = timestamp.minutes(); 
var second = timestamp.seconds(); 

這裏是更新您的代碼：

var canvas = document.getElementById("clock"); 
 
var ctx = canvas.getContext("2d"); 
 
var radius = canvas.height/2; 
 
ctx.translate(radius, radius); 
 
setInterval(drawClock, 1000); 
 

 
function drawClock() { 
 
\t ctx.clearRect(-radius, -radius, canvas.width, canvas.height); 
 
\t drawNumbers(ctx, radius); 
 
\t drawTime(ctx, radius); 
 
} 
 

 
function drawNumbers(ctx, radius) { 
 
\t var ang; 
 
\t var num; 
 
\t ctx.font = 14 + "px arial"; 
 
\t ctx.textBaseline="middle"; 
 
\t ctx.textAlign="center"; 
 
\t for(num = 1; num < 13; num++){ 
 
\t \t ang = num * Math.PI/6; 
 
\t \t ctx.rotate(ang); 
 
\t \t ctx.translate(0, -radius*0.80); 
 
\t \t ctx.rotate(-ang); 
 
\t \t ctx.fillText(num.toString(), 0, 0); 
 
\t \t ctx.rotate(ang); 
 
\t \t ctx.translate(0, radius*0.80); 
 
\t \t ctx.rotate(-ang); 
 
\t \t } 
 
} 
 

 
function drawTime(ctx, radius){ 
 
\t var timestamp = new Date(); 
 
    var timestamp = moment.tz("America/Los_Angeles");; 
 
\t var hour = timestamp.hours(); 
 
\t var minute = timestamp.minutes(); 
 
\t var second = timestamp.seconds(); 
 
\t //hour 
 
\t hour=hour%12; 
 
\t hour=(hour*Math.PI/6)+ 
 
\t (minute*Math.PI/(6*60))+ 
 
\t (second*Math.PI/(360*60)); 
 
\t drawHand(ctx, hour, radius*0.5, radius*0.07); 
 
\t //minute 
 
\t minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
 
\t drawHand(ctx, minute, radius*0.7, radius*0.07); 
 
} 
 

 
function drawHand(ctx, pos, length, width) { 
 
\t ctx.beginPath(); 
 
\t ctx.lineWidth = width; 
 
\t ctx.lineCap = "round"; 
 
\t ctx.moveTo(0,0); 
 
\t ctx.rotate(pos);ctx.lineTo(0, -length); 
 
\t ctx.stroke(); 
 
\t ctx.rotate(-pos); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.7/moment-timezone-with-data-2010-2020.min.js"></script> 
 

 
<canvas id="clock" height="114" width="114"></canvas>