[分享]css与js结合之钟表

CSS与JS是网页开发中非常常用的两种技术，它们可以结合起来创建各种各样的效果。本文将介绍一种使用CSS和JS结合制作的钟表效果。首先，在HTML文档中创建一个div元素，其中包含三个span元素用于...

CSS与JS是网页开发中非常常用的两种技术，它们可以结合起来创建各种各样的效果。本文将介绍一种使用CSS和JS结合制作的钟表效果。

首先，在HTML文档中创建一个div元素，其中包含三个span元素用于显示具体的时间：小时、分钟和秒钟。这样，就可以使用CSS样式来设置span元素的位置和样式，以及设定钟表的大小、颜色等。

<div id="clock">
  <span id="hour"></span>
  <span id="minute"></span>
  <span id="second"></span>
</div> 

接着，在CSS中，使用transform属性来设置时针、分针和秒针的旋转角度，并设置转换点为钟表中心。同时，使用border-radius属性使钟表外圈呈圆形。

#clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
}

#hour,
#minute,
#second {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

#hour {
  width: 6px;
  height: 50px;
  background-color: #333;
  transform: rotate(0deg);
}

#minute {
  width: 4px;
  height: 70px;
  background-color: #333;
  transform: rotate(0deg);
}

#second {
  width: 2px;
  height: 90px;
  background-color: #f00;
  transform: rotate(0deg);
} 

最后，在JS中使用setInterval函数来更新钟表的旋转角度，以显示实时时间。这样，当页面加载后，时针、分针和秒针将开始不断地旋转，显示一直在变化的时间。

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();
  const hourAngle = hour * 360 / 12 + minute * 30 / 60;
  const minuteAngle = minute * 360 / 60;
  const secondAngle = second * 360 / 60;
  
  document.getElementById('hour').style.transform = `rotate(${hourAngle}deg)`;
  document.getElementById('minute').style.transform = `rotate(${minuteAngle}deg)`;
  document.getElementById('second').style.transform = `rotate(${secondAngle}deg)`;
}

setInterval(updateClock, 1000); 

使用CSS和JS结合可以制作出许多有趣、实用的效果，这只是其中的一例。希望本文能够对您学习CSS和JS有所帮助。