<!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>