JavaScript 02 — JS and CSS Clock

最新推荐文章于 2024-10-30 18:24:25 发布

真不吃香菜

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量248

点赞数

分类专栏： JS 30 文章标签： javascript css html

本文链接：https://blog.csdn.net/Cici__zc/article/details/120768864

版权

JS 30 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用JavaScript实现时钟指针的旋转效果，通过设置transform:rotate()属性，根据时间更新秒针、分针和时针的角度，创建动态的时钟界面。代码中详细解释了秒、分、时与旋转角度的关系，并提供了完整的示例代码，确保时钟准确显示当前时间。

摘要由CSDN通过智能技术生成

实现效果

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