不用canvas，打造属于自己的个人时钟
这篇主要来帮助大家打造一款属于自己的时钟，没有用到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; }
此时就会看到下图 ，上面红色代码是使元素绝对垂直水平居中的一种方式。
样子轮廓已经出来了，然后我们在中间添加一个小红点，作为指针的旋转中心
<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%; }
效果图
接着我们就要添加时分秒针了，就是要将时分秒针的一端固定在，我刚刚加的那个红点上。
在.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; }
现在就变成下面的样子了：
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; }
好了样子已经完全出来了，下面只需要加入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，大功告成。
完整代码：
ul,li{list-style: none;margin: 0} .outer{ width: 250px; height: 250px; background:#545454; border-radius: 150px; position: relative; } .middle{ width : 200px; height : 200px; background : #FDE3A8; margin : auto; border-radius : 50%; 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; } .center { width : 8px; height : 8px; background : red; position : absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius : 50%; } .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; } #deg li{ width : 2px; height : 4px; background : #000; position : absolute; top : -96px; left: 3px; transform-origin : center 100px; } #deg li:nth-child(5n +1){ height : 7px; background : red; }
<div class="outer"> <div class="middle"> <div class="inner"> <div class="center"> <div class="hour hand"></div> <div class="min hand"></div> <div class="second hand"></div> <ul id="deg"></ul> </div> </div> </div> </div>
for (var i = 60; i > 0; i--) { var degLi=document.createElement("li"); degLi.style.transform="rotate("+6*i+"deg)"; idDom("deg").appendChild(degLi); } 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); }
DJL箫氏，就读于一个三流学校，酷爱前端，欢迎大家关注我的公众号：hbutblgzs，充满了惊喜！
