css3 时钟特效

今天咱们做一个在网页做一个是时钟，大家可能会在自己的项目中用到，可以先看一下gif的动画 不是很清楚 下面会有代码块

简单的看一下 html结构

<div class="c"> // 为外面打的表盘
       <ul class="min"></ul>// 分钟刻度
       <ul class="hour">
           <li class="line-k"></li>
       </ul> // 小时刻度
       <ol class="mun"></ol> // 数字的容器
       <ul class="poi"> // 装指针用的
         <li class="hour-z"></li> // 时
         <li class="min-z"></li> // 分
         <li class="sec"></li> // 秒
         <li class="cir"></li> // 表盘中心点坐标
       </ul>
    </div>

我在这里用静态样式写了一个刻度 大家可以看下图片

这是css，我把旋转的中心点重新设置了一下，在旋转的过程中不做设置 会有问题

        .line-k{
            position:absolute;
            left: 50%;
            top: 50%;
            transform:  rotate(-60deg) translate(80px,-50%);
            transform-origin: left center;
            width: 20px;
            height: 10px;
            background-color: red;
        }

以这个静态样式为模版，我们需要把 时刻和分课分别是js写出来 下面的方法 这个方法时刻和分刻的绘制，是可以服复用的

    function createLine(warp,total,translateX) { // 容器dom  刻度总数 x轴方向的偏移量
        var g = 360/total;// 算出夹角的度数
        var str = '';
        for(var a=0;a<total;a++) { // a*g当前刻度与x轴的夹角
            str +=`<li style=" transform:  rotate(${a*g}deg) translate(${translateX}px,-50%);"> </lr>`
        }
        // console.log(str)
        warp.html(str)
    }

绘制刻度完成请看下面的图

接下来我们就需要把数字也绘制到表盘上，我们想把数字绘制到表盘相对应的位置，还是需要知道坐标点，会用到三角函数

下面是js方法

    function createNum(warp) {
        var radius = warp.width()/2; // 半径
        var str = ""
        for (var i = 1;i<=12;i++) { // 12个小时 一个夹角是30du
          var angle = (i-3)/6*Math.PI; // 当前数字与x轴的夹角  
          var left = radius+radius*Math.cos(angle)
          var top = radius+radius*Math.sin(angle)
          str+=`<li style="left:${left}px;top:${top}px">${i}</li>`
        }
        warp.html(str)
    }

这是绘制完的状态

接下来就是绘制时针，分针，和秒针了

咱们需要分别计算秒针角度 分针角度 和时针角度 可以看图

秒针 = s*6-90

分针 = m*6+(s/60)*6 -90

时针 = h*30+(m/60)*30 -90

这是根据x轴为横坐标算出来的也就是3点钟方式，时钟应该是在12点钟方向，所以我们角度应该在-90，就指向12点钟方向了

然后在添加一个setInterval定时器，就可以实现了

代码已发布在代码块 但是不知道为什么 代码块有bug 引用jq不生效 不知道为什么 如果大家想看的话 需要把代码开块的代码复制本地 跑一下

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”