实现效果
利用JS设置transform:rotate()来实现时钟指针旋转效果。
<script>
// 1、先设置定时器 1000毫秒执行一次
// 2、先确定指针和旋转角度的关系 再获取秒数、秒针旋转角度 最后获取秒针实现旋转
// 秒针:走一圈360度,60秒,即 360/60=6度
// 分针:走一圈360度,60分钟,即 360/60=6度
// 时针:走一圈360度,12个小时,即 360/12=30度
const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')
function setDate() {
const now = new Date()
const seconds = now.getSeconds()
const secondsDegrees = (seconds * 6) + 90
// css样式默认是旋转了90度,所以指针的默认位置在九点而不在零点,+90就回到了零点的位置
secondHand.style.transform = `rotate(${secondsDegrees})deg`
const mins = now.getMinutes()
const minsDegrees = (mins * 6) + 90
minHand.style.transform = `rotate(${minsDegrees})deg`
const hours = now.getHours()
const hoursDegrees = (hours * 30) + ((mins / 60) * 30) + ((seconds / 3600) * 30) + 90
hourHand.style.transform = `rotate(${hoursDegrees})deg`
console.log(`${hours}时 + ${mins}分 + ${seconds}分`)
}
setInterval(setDate, 1000)
setDate() //一打开页面就执行 如果不加此行代码 打卡页面会有一秒钟的卡顿 因为setInterval()回调函数是在1s后执行
</script>