<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟</title>
<style>
#box {
margin: 100px auto;
background: url(images/clock.jpg) no-repeat center center;
width: 600px;
height: 600px;
position: relative;
}
#hour {
position: absolute;
background: url(images/hour.png) no-repeat center center;
width: 30px;
height: 600px;
left: 50%;
transform: translateX(-50%);
}
#minute {
position: absolute;
background: url(images/minute.png) no-repeat center center;
width: 30px;
height: 600px;
left: 50%;
transform: translateX(-50%);
}
#second {
width: 30px;
height: 600px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: url(images/second.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="box">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
<script>
let hour = document.getElementById('hour')
let minute = document.getElementById('minute')
let second = document.getElementById('second')
setInterval(function(){
let now = new Date();
let h = now.getHours();
let m = now.getMinutes();
let s = now.getSeconds();
let ms = now.getMilliseconds();
console.log(h,m,s,ms)
hour.style.transform = 'rotate('+(h*30+m*0.5)+'deg)'
minute.style.transform = 'rotate('+(m*6+s*0.1)+'deg)'
second.style.transform = 'rotate('+(s*6+ms*0.006)+'deg)'
},1000)
</script>
</html>
