CSS3实现时钟效果

最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。
最先是用CSS实现的是一个时钟的效果，如下图：

实现效果

1.圆盘

说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。
先写一个div，然后给相关的样式

<div class="clock"></div>
.clock{
      position: absolute;
      width: 250px;
      height: 250px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background-color: #ffffff;
      border-radius: 50%;
      border:10px double black;
      
    }

2.刻度

其次当然就是刻度的问题了，刻度用什么可以实现了，不可能再用div了，因为太多了，就想到了列表 “ul"和"li”。

<ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 ul{
      height: 250px;
      position: relative;
      list-style: none;
    }
  ul li{
      width: 2px;
      height: 5px;
      background-color: #000000;
      position: absolute;
      left:124px; 
      top: 0;
      -webkit-transform-origin:center 125px;
    }
  ul li:nth-of-type(1){-webkit-transform: rotate(0);}
  ul li:nth-of-type(2){-webkit-transform: rotate(90deg);}
  ul li:nth-of-type(3){-webkit-transform: rotate(180deg);}
  ul li:nth-of-type(4){-webkit-transform: rotate(270deg);}

先给四个li，做最醒目的那四个位置。利用css 的transform的变换效果，对每个li进行变换。

3.最重要的部分——中间圆点，时针，分针，秒针

a. 圆点

圆点是中间的固定几根针的地方，给它一个div就可以了

<div class="point">
      <!-- 中间圆点 -->
    </div>

.point{
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #000000;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 99;
    }

注意：这里记得要用z-index属性去修改它的层数，要不然几根针会覆盖在上面，就不好看了。

b.时针，分针，秒针

也是用div就可以实现。

<div class="hour">
   <!-- 时针 -->
 </div>
<div class="min">
   <!-- 分针 -->
</div>
<div class="sec">
   <!-- 秒针 -->
</div>

.hour{
      width: 6px;
      height: 60px;
      background-color: #000000;
      position: absolute;
      left:122px;
      top: 65px;
    }
.min{
      width: 4px;
      height: 80px;
      background-color: gray;
      position: absolute;
      left:123px;
      top: 45px;
    }
.sec{
      width: 2px;
      height: 100px;
      background-color: red;
      position: absolute;
      left:124px;
      top: 25px;
    }

js代码部分

1.刻度

前面就实现了四个刻度，但是时针的刻度有60个，那样写的话代码太多了，用js的循环就可以简短地实现。

//拿到ul元素
var list = document.getElementsByClassName('list')[0];
//style 是待会修改li里面的样式
var style = "";
//inner 是待会ul的innerHTML
var inner = "";

for(var i=0;i<60;i++){
      if(i%5 === 0){
        if(i%15 === 0){
          style = "-webkit-transform: rotate("+i*6+"deg);height:20px;width:3px"
        }
        else{
        style = "-webkit-transform: rotate("+i*6+"deg);height:15px"
        }
      }
      else{
      style = "-webkit-transform: rotate("+i*6+"deg)"}
      inner+="<li style=\""+ style+"\"></li>";
   }
list.innerHTML = inner;

修改样式的时候，顺便把不同位置的刻度长度和宽度修改，使好看一点。

2.动起来

让几根针动起来，通过修改样式，达到转动的效果。

var hourCss = document.getElementsByClassName('hour')[0];
var minCss = document.getElementsByClassName('min')[0];
var secCss = document.getElementsByClassName('sec')[0];

function goTime(){
      var date = new Date();
      var sec = date.getSeconds();
      var min = date.getMinutes() + sec/60;
      var hour = date.getHours() + min/60;

      hourCss.style = "-webkit-transform: rotate("+hour*6+"deg);-webkit-transform-origin: bottom";
      minCss.style = "-webkit-transform: rotate("+min*6+"deg);-webkit-transform-origin: bottom";
      secCss.style = "-webkit-transform: rotate("+sec*6+"deg);-webkit-transform-origin: bottom";

注意：为了让转动流畅，min 和 hour 别忘了加上 sec/60 和 min/60

最后，别忘了还要调用上面的方法，第一次调用是初始化，然后要弄个定时器，让它持续转动。

goTime();
setInterval(goTime,1000);

这次的时钟就做完了，继续加油！！！
参考：https://blog.csdn.net/qq_38632067/article/details/79533037