<!DOCTYPE html>
<html>
<head>
<title>Multi-Timezone Clock</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
<script>
function addZero(num) {
return num < 10 ? '0' + num : num;
}
function Clock(options) {
this.options = options || {};
this.options.color = this.options.color || 'black';
this.options.radius = this.options.radius || 150;
this.options.date = this.options.date || new Date();
this.options.timezone = this.options.timezone || 'UTC';
this.init();
}
Clock.prototype = {
init: function() {
var ctx = document.getElementById('clock').getContext('2d');
ctx.save();
ctx.translate(200, 200);
this.drawFace(ctx);
this.drawNumbers(ctx);
this.drawTime(ctx);
ctx.restore();
},
drawFace: function(ctx) {
ctx.beginPath();
ctx.arc(0, 0, this.options.radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
var grad = ctx.createRadialGradient(0, 0, this.options.radius * 0.95, 0, 0, this.options.radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = 5;
ctx.stroke();
},
drawNumbers: function(ctx) {
ctx.font = this.options.radius * 0.15 + 'px arial';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
for (var i = 1; i < 13; i++) {
var angle = (i - 1) * (2 * Math.PI) / 12;
ctx.fillText(i, this.options.radius * Math.cos(angle), this.options.radius * Math.sin(angle));
}
},
drawTime: function(ctx) {
var date = new Date();
var timezoneOffset = date.getTimezoneOffset() * 60000; // convert
评论已关闭