JavaScript 02 — JS and CSS Clock

实现效果

利用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>