关于技术您现在的位置是:首页 > 关于技术

CSS时钟效果分步实现

头像 2019-01-22 18:24:07 , 116 人已围观 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,拜~

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号