div+js 和 canvas 绘制 时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #333;
position: relative;
}
.hour-hand,
.minute-hand,
.second-hand {
background-color: #333;
position: absolute;
top: calc(50% - 2.5px);
left: 50%;
transform-origin: center bottom;
}
.hour-hand {
height: 50px;
width: 8px;
margin-left: -4px;
transform:rotate(var(--rotation));
transform-origin:top;
}
.minute-hand {
height: 75px;
width: 6px;
margin-left: -3px;
transform:rotate(var(--rotation));
transform-origin:top;
}
.second-hand {
height: 90px;
width: 2px;
margin-left: -1px;
transform:rotate(var(--rotation));
transform-origin:top;
}
.center {
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: calc(50% - 7.5px);
left: calc(50% - 7.5px);
}
</style>
<body>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="center"></div>
</div>
<canvas id="clock" width="200" height="200"></canvas>
</body>
<script>
function setClock() {
const date = new Date();
const secondsRatio = date.getSeconds() / 60;
const minutesRatio = (secondsRatio + date.getMinutes()) / 60;
const hoursRatio = (minutesRatio + date.getHours()) / 12;
const hourHand = document.querySelector(".hour-hand");
const minuteHand = document.querySelector(".minute-hand");
const secondHand = document.querySelector(".second-hand");
console.log(secondsRatio)
setRotation(hourHand, hoursRatio);
setRotation(minuteHand, minutesRatio);
setRotation(secondHand, secondsRatio);
}
function setRotation(element, rotationRatio) {
element.style.setProperty("--rotation", rotationRatio * 360+180+'deg');
}
setInterval(setClock, 1000);
var canvas = document.getElementById('clock');
var ctx = canvas.getContext('2d');
var radius = canvas.width / 2;
function drawClock() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制时钟边框
ctx.beginPath();
ctx.arc(radius, radius, radius - 10, 0, 2 * Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
// 绘制小时数字
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var i = 1; i <= 12; i++) {
var angle = i * Math.PI / 6;
ctx.fillText(i.toString(), radius + (radius - 30) * Math.sin(angle),
radius - (radius - 30) * Math.cos(angle));
}
// 绘制时针
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = hour % 12; // 转换为 12 小时制
var hourAngle = (hour * 60 + minute) * Math.PI / 360;
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.lineWidth = 8;
ctx.lineCap = 'round';
ctx.lineTo(radius + (radius - 80) * Math.sin(hourAngle),
radius - (radius - 80) * Math.cos(hourAngle));
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
// 绘制分针
var minuteAngle = minute * Math.PI / 30;
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.lineTo(radius + (radius - 50) * Math.sin(minuteAngle),
radius - (radius - 50) * Math.cos(minuteAngle));
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
// 绘制秒针
var secondAngle = second * Math.PI / 30;
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineTo(radius + (radius - 30) * Math.sin(secondAngle),
radius - (radius - 30) * Math.cos(secondAngle));
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.closePath();
// 绘制中心点
ctx.beginPath();
ctx.arc(radius, radius, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath();
}
// 每秒钟更新时钟
setInterval(drawClock, 1000);
</script>
</html>