javascript - 在 Javascript 模拟时钟中使用时刻时区

Question

无法让时刻时区在模拟时钟上工作。想要时钟显示洛杉矶时间。时钟适用于“new Date()”而不是“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，而只是小时、分钟、秒:

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() {
	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 = new Date();
  var timestamp = moment.tz("America/Los_Angeles");;
	var hour = timestamp.hours();
	var minute = timestamp.minutes();
	var second = timestamp.seconds();
	//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);
}

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