关于技术您现在的位置是:首页 > 关于技术
CSS时钟效果分步实现
2019-01-22 18:24:07 【CSS, Javascript】 413 人已围观 0 条评论
上篇咱们说到,用 Canvas 绘制一个时钟,看起来似乎特别丑,不美观。今天我们再用CSS和JS来实现一个比较 […]
上篇咱们说到,用 Canvas 绘制一个时钟,看起来似乎特别丑,不美观。今天我们再用CSS和JS来实现一个比较漂亮的时钟效果。
老规矩,上效果图:
怎么样,这个效果是不是更像是我们常用的钟表的样子。那么,接下来,我们就去分步实现它吧!
首先,我们的html结构:
<div class="clock"> <ul class="line_min"></ul> <ul class="line_hour"></ul> <ol class="number"></ol> <ul class="pointer"> <li class="hour"></li> <li class="min"></li> <li class="sec"></li> <li class="circle"></li> </ul> </div>
分别有分针刻度、时针刻度、时间数字、时针、分针、秒针、表盘中心等元素架构。
给它们加上css样式,如下:
*{ margin:0;padding:0; } body{ background-color:#fff; font-family:"微软雅黑"; } li{ list-style:none; } h1{ text-align:center; color:#333; margin-top:40px; } /*表盘*/ .clock{ position:relative; width:200px; height:200px; border-radius:100%; background-color:#292a38; margin:50px auto; } .pointer li.circle{ position:absolute; top:50%; left:50%; margin-top:-5px; margin-left:-5px; width:10px; height:10px; border-radius:100%; background-color:#fff; transform-origin:left center; } .line_hour li,.line_min li{ position:absolute; left:50%; top:50%; transform-origin:left center; background-color:#fff; } .line_hour li{ width:10px; height:2px; } .line_min li{ width:5px; height:2px; } /*数字*/ .number{ position:absolute; width:150px; height:150px; left:50%; top:50%; transform:translate(-50%,-50%); font-family:"微软雅黑"; font-size:15px; color:#fff; } .number li{ position:absolute; transform:translate(-50%,-50%); } /*指针*/ .pointer li{ position:absolute; top:50%; left:50%; transform-origin:left center; background-color:#fff; } .pointer li.hour{ width:45px; height:3px; transform:translateY(-50%); } .pointer li.min{ width:60px; height:2px; transform:translateY(-50%); } .pointer li.sec{ width:95px; height:1px; transform:translate(-15px,-50%); }
结构样式完了,重要的是我们的js部分:
* 注意:需要先引入jQuery库
<script src="http://s0.qhimg.com/lib/jquery/183.js"></script> <script type="text/javascript"> $(function(){ function init(){ drawLines($('.line_min'),60,90); drawLines($('.line_hour'),12,85); drawNumbers($('.number')); move(); } init(); /*绘制钟表刻度线 wrap 刻度线的父容器 total 刻度线的总个数 translateX 刻度线在x轴方向的偏移量 */ function drawLines(wrap,total,translateX){ var gap = 360/total; var strHtml = ""; for(var i=0; i<total; i++){ strHtml += '<li style="transform:rotate('+(i*gap)+'deg) translate('+translateX+'px,-50%)"></li>'; } wrap.html(strHtml); } /*绘制钟表数字 wrap 数字的父容器 */ function drawNumbers(wrap){ var radius = wrap.width()/2; var strHtml = ''; for(var i=1; i<=12; i++){ var myAngle = i/6*Math.PI; var myX = radius + radius*Math.sin(myAngle), myY = radius - radius*Math.cos(myAngle); strHtml += '<li style="left:'+myX+'px; top:'+myY+'px">'+i+'</li>'; } wrap.html(strHtml); } /*钟表走动 转动秒针、分针、时针 */ function move(){ setInterval(function(){ var now = new Date(), hour = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); var secAngle = sec*6 - 90, minAngle = min*6 + sec*6/60 - 90, hourAngle = hour*30 + min*30/60 + sec*30/(60*60) - 90; $('.sec').css('transform','rotate('+secAngle+'deg) translateX(-15px)'); $('.min').css('transform','rotate('+minAngle+'deg)'); $('.hour').css('transform','rotate('+hourAngle+'deg)'); document.title = hour + ':' + min + ':' +sec; },1000); } }) </script>
其中,有两个重点简单说明一下,其他的跟着代码敲一遍很容易理解的。
第一个重点是绘制钟表上数字的函数。一共12个数字,我们做一个循环,然后分别定位到表盘的相应位置。代码中红框中的算法怎么来的,我们看以下数学算法:
以上看图理解,相信一看就明白每个数字的位置(X,Y)怎么得来的。
其中,
X = r + r*sin(θ), Y = r - r*cos(θ);
r 已知,是我们自己定义的,本例中 r = 150 px,那么θ如何确定呢?
我们是从1到12做循环,数字将表盘一共分为12格,每格角度是30°,那么第i个数字对应的角度为i*30°,转化为弧度即为i*30*π/180=i*π/6 .
以上如此,钟表的12个数字就绘制完成了,突然发现,对敲代码来说,数学知识还是挺重要的嘞!
第二个重点是指针走动的函数。要确定某一时刻时针、分针、秒针各自的角度位置,这个问题在上一篇‘用 Canvas 绘制一个时钟’已经说明过了,这里不再赘述。
最后我们是通过调用init()函数,就可以实现最终效果了,狠戳这里吧。相信大家还有很多很好玩的方法来实现,我们,加油!
Over,拜~
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注