HTML/JS实现漂亮的时钟效果

以下是实现上述时钟效果的核心JavaScript代码：

function updateClock() {
    var now = new Date();
    var ctx = document.getElementById('clock').getContext('2d');
 
    ctx.clearRect(0, 0, 300, 300);
 
    ctx.save();
    ctx.translate(150, 150);
 
    // 绘制表盘
    ctx.beginPath();
    ctx.arc(0, 0, 140, 0, 2 * Math.PI);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.stroke();
 
    // 绘制时针分针秒针
    drawHand(ctx, now.getSeconds() * 6, 130); // 秒针
    drawHand(ctx, now.getMinutes() * 6 + now.getSeconds() / 10, 110); // 分针
    drawHand(ctx, now.getHours() * 30 + now.getMinutes() / 2, 90); // 时针
 
    ctx.restore();
}
 
function drawHand(ctx, length, width) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(150, 150);
    ctx.rotate(length * Math.PI / 180);
    ctx.moveTo(-5, 0);
    ctx.lineTo(width, 0);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 7;
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.restore();
}
 
// 初始化时钟
updateClock();
setInterval(updateClock, 1000);

这段代码首先定义了updateClock函数，它会创建一个新的Date对象来获取当前的时间，并使用HTML5 Canvas API来绘制一个简单的时钟。每秒钟调用updateClock函数来更新时钟指针。drawHand函数用于绘制时针、分针和秒针。