這篇主要來幫助大家打造一款屬于自己的時鐘，沒有用到canvas，因為目前我也不會canvas，一直想學，卻遲遲沒有落實。還是老規矩先上成品圖吧！有圖有真相

最終呈現圖

怎么樣還不錯吧，下面就來告訴大家，如何一步步實現。
首先我們按照如下組織我們的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;}

此時就會看到下圖 ，上面紅色代碼是使元素絕對垂直水平居中的一種方式。

效果圖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%;}

效果圖

效果圖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;}

現在就變成下面的樣子了：

效果圖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;//尤為重要的一句，設置旋轉中心}

見圖解，大家下來可以自行動手實踐。

講解圖

然后加入下面css代碼，使刻度更為真實

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

效果圖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，大功告成
源碼可以到我的github上下載：下載地址
DJL簫氏，酷愛前端