不用canvas，打造属于自己的个人时钟-原创手记-慕课网

这篇主要来帮助大家打造一款属于自己的时钟，没有用到canvas，因为目前我也不会canvas，一直想学，却迟迟没有落实。还是老规矩先上成品图吧！有图有真相

276

最终呈现图

怎么样还不错吧，下面就来告诉大家，如何一步步实现。
首先我们按照如下组织我们的HTML架构

    <div class="outer"> 
        <div class="middle"> 
              <div class="inner"></div> 
        </div>
    </div>

没错.outer就是黑色的圆，.middle就是中间黄色的圆，.inner就是最里面的绿色的圆。然后加入如下css样式。

.outer{width: 250px;height: 250px;    background:#545454; 
    border-radius: 150px;    position: relative;}.middle{width : 200px;height : 200px;    background : #FDE3A8;border-radius : 50%;    margin : auto;    position : absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;}.inner{width: 180px;height: 180px;    border-radius: 100px;    background: radial-gradient(circle,#407908, #C3C3C3);    position: absolute;    margin: auto;    top: 0;    left: 0;    right: 0;    bottom: 0;}

此时就会看到下图，上面红色代码是使元素绝对垂直水平居中的一种方式。

261

效果图1

样子轮廓已经出来了，然后我们在中间添加一个小红点，作为指针的旋转中心

<div class="outer"> 
    <div class="middle"> 
         <div class="inner"> 
              <div class="center"></div> 
        </div> 
  </div>

</div>

添加css代码

.center {width : 8px;height : 8px;  background : red;  position : absolute;margin: auto;  top: 0;left: 0;right: 0;  bottom: 0;border-radius : 50%;}

效果图

258

效果图2

接着我们就要添加时分秒针了，就是要将时分秒针的一端固定在，我刚刚加的那个红点上。
在.center的div里面加入如下HTML代码：

  <div class="hour hand"></div>
  <div class="min hand"></div>
  <div class="second hand"></div>

css代码：

.hour{width : 6px;height : 30px;background : #fff;}.min {width : 4px;height : 40px;background : green;}.second {width : 2px;height : 50px;background : yellow;}.hand{position : absolute;margin: 0 auto;bottom: 50%;  left: 0;right: 0;transform-origin : bottom center;}

现在就变成下面的样子了：

264

效果图3

ok,接下来最重要的就是，刻度盘了，首先我们在

<div class="second  hand"></div>

下面加入一个ul

<ul id="deg"></ul>

然后通过js代码，循环60次，创建60个li元素，这60个li元素就是刻度

for (var i = 60; i > 0; i--) { 
    var degLi=document.createElement("li");    
    degLi.style.transform="rotate("+6*i+"deg)";//每个li相应的进行旋转，每个li之间相差6度，6*60刚好就是360度    
    idDom("deg").appendChild(degLi);//然后将这60个li加入ul内。}

然后给这些li元素加入基本样式

#deg li{width : 2px;height : 4px;
  background : #000;position : absolute;
  top : -100px;left: 3px;
  transform-origin : center 100px;//尤为重要的一句，设置旋转中心}

见图解，大家下来可以自行动手实践。

501

讲解图

然后加入下面css代码，使刻度更为真实

#deg li:nth-child(5n +1){height : 7px;background : red;}

258

效果图4

好了样子已经完全出来了，下面只需要加入js代码使指针正确的运动起来就OK了；

function runtime(){ 
  var date=new Date(); 
  var secs=date.getSeconds(); 
  var minus=date.getMinutes(); //换成12小时制，并加上小时的小数部分 
  var hours=date.getHours()-12+minus/60; 
  classDomList("hour")[0].style.transform="rotate("+30*hours+"deg)" 
  classDomList("min")[0].style.transform="rotate("+6*minus+"deg)" 
  classDomList("second")[0].style.transform="rotate("+6*secs+"deg)"}function classDomList(className){ 
    return domItems= document.getElementsByClassName(className);
}

setInterval(function(){ 
  runtime();
},1000)function idDom(id){ 
    return document.getElementById(id);
}

OK，大功告成

作者：DJL箫氏
链接：https://www.jianshu.com/p/bc8e59858a9a