如何基于HTMl5+CSS3实现时钟效果?

如何基于HTMl5+CSS3实现时钟效果?

目的:

利用html5,css实现钟摆效果

知识点:

1) 利用position/left/top和calc()实现元素的水平和垂直居中;

2) 利用CSS3的animation/transform/transform-origin属性定义动画;

3) 利用transform-origin实现旋转原点的圆心调整

废话不多说了,直接看代码吧,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{
      list-style:none;
    }
    #box{
      width: 400px;
      height: 400px;
      position: absolute;
      top:calc(50% - 200px);
      left:calc(50% - 200px);
      border: 2px solid palegoldenrod;
    }
    #dial{
      width: 200px;
      height: 200px;
      position: absolute;
      top:calc(50% - 100px);
      left:calc(50% - 100px);
      border: 2px solid cyan;
      border-radius: 50%;
    }  
    .scaleIndex{
      width: 4px;
      height: 12px;
      position: absolute;
      top: 0;
      left: calc(50% - 2px);
      background-color: gray;
      transform-origin: 2px 100px;
    }
    .angle30{transform : rotate(30deg);}
    .angle60{transform : rotate(60deg);}
    .angle90{transform : rotate(90deg);}
    .angle120{transform : rotate(120deg);}
    .angle150{transform : rotate(150deg);}
    .angle180{transform : rotate(180deg);}
    .angle210{transform : rotate(210deg);}
    .angle240{transform : rotate(240deg);}
    .angle270{transform : rotate(270deg);}
    .angle300{transform : rotate(300deg);}
    .angle330{transform : rotate(330deg);}
    #fixPoint{
      width: 10px;
      height: 10px;
      position: absolute;
      top:calc(50% - 5px);
      left:calc(50% - 5px);
      background-color: cadetblue;
      border-radius: 50%;
    }
    #hourHand{
      width: 6px;
      height: 70px;
      position:absolute;
      top: 40px;
      left: calc(50% - 3px);
      background-color: darkblue;
      transform-origin: 50% 60px;
    }
    #minuteHand{
      width: 4px;
      height: 75px;
      position:absolute;
      top: 35px;
      left: calc(50% - 2px);
      background-color: yellow;
      transform-origin: 50% 65px;
    }
    #secondHand{
      width: 2px;
      height: 90px;
      position:absolute;
      top: 20px;
      left: calc(50% - 1px);
      background-color: red;
      transform-origin: 50% 80px;
    }
  </style>
</head>
<body>
  <div id = "box">
      <div id = 'dial'>
        <ul id = "scale">
          <li class = "scaleIndex"></li>
          <li class = "scaleIndex angle30"></li>
          <li class = "scaleIndex angle60"></li>
          <li class = "scaleIndex angle90"></li>
          <li class = "scaleIndex angle120"></li>
          <li class = "scaleIndex angle150"></li>
          <li class = "scaleIndex angle180"></li>
          <li class = "scaleIndex angle210"></li>
          <li class = "scaleIndex angle240"></li>
          <li class = "scaleIndex angle270"></li>
          <li class = "scaleIndex angle300"></li>
          <li class = "scaleIndex angle330"></li>
        </ul>
        <div id = "fixPoint"></div>
        <div id = "hourHand"></div>
        <div id = "minuteHand"></div>
        <div id = "secondHand"></div>
      </div>
    </div>
<script type = 'text/javascript' src = 'js/jquery-3.2.1.js'></script>
<script type = "text/javascript">
window.onload = function(){
      var hourHand = document.getElementById('hourHand');
      var minuteHand = document.getElementById('minuteHand');
      var secondHand = document.getElementById('secondHand');
setInterval(function(){
          var currentTime = new Date();
          var hourValue = currentTime.getHours();
          var hourAngle = hourValue / 24 * 360 + 'deg';
          var minuteValue = currentTime.getMinutes();
          var minuteAngle = minuteValue / 60 * 360 + 'deg';
          var secondValue = currentTime.getSeconds();
          var secondAngle = secondValue / 60 * 360 + 'deg';
          console.log(hourAngle);
// 方法一:利用jquery的css()增加属性
var cmdHour = 'rotate('+ hourAngle +')';
$('#hourHand').css({transform:'rotate('+ hourAngle +')'});
var cmdMinute = 'rotate('+ minuteAngle +')';
$('#minuteHand').css({transform:cmdMinute});
var cmdSecond = 'rotate('+ secondAngle +')';
$('#secondHand').css({transform:cmdSecond});

// 方法二:利用DOM元素的style属性设置
//   hourHand.style.transform = 'rotate('+ hourAngle + ')';
//   minuteHand.style.transform = 'rotate('+ minuteAngle + ')';
//   secondHand.style.transform = 'rotate('+ secondAngle + ')'; 

},1000);
}
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于HTML5+CSS3实现简单的时钟效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持!