transform:rotate(1deg)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="clock.css">
<title>Clock</title>
</head>
<body>
<div id="clock">
<div class="pointer" id="hour"></div>
<div class="pointer" id="minute"></div>
<div class="pointer" id="second"></div>
</div>
<script>
var hourEle = document.getElementById("hour");
var minuteEle = document.getElementById("minute");
var secondEle = document.getElementById("second");
setInterval(
function () {
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
let hourDeg = (hour%12+minute/60)*30-90;
let minuteDeg = (minute+second/60)*6-90;
let secondDeg = second*6-90;
hourEle.style.transform = "rotate("+hourDeg+"deg)";
minuteEle.style.transform = "rotate("+minuteDeg+"deg)";
secondEle.style.transform = "rotate("+secondDeg+"deg)";
},
1000
)
</script>
</body>
</html>
#clock{
position: relative;
width: 100px;
height:100px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 1px solid grey;
}
.pointer{
transform-origin: left center;
}
#hour{
width: 30px;
height: 4px;
background-color: black;
position: absolute;
top:50%;
left: 50%;
margin-top: -2px;
}
#minute{
width: 40px;
height: 2px;
background-color: blue;
position: absolute;
top:50%;
left: 50%;
margin-top: -1px;
}
#second{
width: 45px;
height: 1px;
background-color: red;
position: absolute;
top:50%;
left: 50%;
}
时间： 2024-08-03 04:00:23