<!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>
.clock{
width: 600px;
height: 600px;
position: relative;
background: url(images/clock.jpg);
}
.clock div{
width: 20px;
height: 300px;
position: absolute;
top: 150px;
left: 290px;
}
.hour{
background: url(images/hour.png) no-repeat center center;
}
.minute{
background: url(images/minute.png) no-repeat center center;
}
.second{
/* transition: all 2s; */
background: url(images/second.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour" id="hour"></div>
<div class="minute" id="minute"></div>
<div class="second" id="second"></div>
</div>
<script>
let hourDiv = document.getElementById('hour');
let minuteDiv = document.getElementById('minute');
let secondDiv = document.getElementById('second');
let hourNow = 0,minuteNow = 0,secondNow = 0;
setInterval(function(){
let time = new Date();
secondNow = time.getSeconds();
minuteNow = time.getMinutes() + secondNow / 60;
hourNow = time.getHours() % 12 + minuteNow /60;
minuteDiv.style.transform = 'rotate(' + minuteNow *6 + 'deg)';
secondDiv.style.transform = 'rotate(' + secondNow *6 + 'deg)';
hourDiv.style.transform = 'rotate(' + hourNow *30 + 'deg)';
},1000);
</script>
</body>
</html>
