目錄

1、css代碼

2.html代碼

3.js代碼

---

1、css代碼

 .box {position: relative;width: 600px;height: 600px;background: url(./images/clock.jpg) no-repeat center;}.hour,.minute,.second {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.hour {background: url(./images/hour.png) no-repeat center;transform: rotate(270deg);}.minute {background: url(./images/minute.png) no-repeat center;transform: rotate(0deg);}.second {background: url(./images/second.png) no-repeat center;transform: rotate(0deg);}

2.html代碼

 <div class="box"><div class="hour"></div><div class="minute"></div><div class="second"></div></div>

3.js代碼

創建日期對象，獲取當前時間，計算秒針，時針，分針轉一圈的度數，來設置每秒的旋轉度數

角度換算：

????????小時角度公式：小時 * 30 + 分鐘 / 60 * 30

????????分鐘角度公式：分鐘* 6 + 秒 / 60 * 6

?????????秒角度公式： 當前秒數 * 6

?????????獲取當前時分秒

多次調用定時器，重復獲取時間，讓指針動起來

 const second = document.querySelector('.second')const hour = document.querySelector('.hour')const minute = document.querySelector('.minute')function getTime() {let date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()const h_rotate = h * 30 + (m / 60) * 30const m_rotate = m * 6 + (s / 60) * 6const s_rotate = s * 6hour.style.transform = `rotate(${h_rotate})deg`minute.style.transform = `rotate(${m_rotate}deg)`second.style.transform = `rotate(${s_rotate}deg)`}getTime()setInterval(getTime, 1000)

?

?