js+css3动态时钟-------Day66

昨天，有一天招，宽带到底没装上。相当恼火，不过包了一天租新房，有很多想法下来，其中，率先实现了--动态时钟（它已上载的资源，一些粗略的全貌。汗...）

这里记录。这个看似简单的功能，以达到良好的，我在的实施过程中遇到了哪些问题。代码，仅仅是依据自己现阶段的学习来做的，可能会有些麻烦。有些粗糙，可是终归是实现了这个效果，心里还是小开心了下。

先来张终于实现的效果图（静态图片）;

首先准备素材，我从网上搜到了一个时钟的素材，谁让我的ps还菜的菜呢。然后我有了表盘、时针、分针和秒针。这样组成一个闹钟的基本元素就全了。

然后就是对素材的放置。这里是解决的第一个问题，尽管是自找的问题，（我将它放在了页面中间）

**********css实现居中*******

来看一下实现的代码;

html部分

 <div id="back">
	<img src="back.jpg" width="600px" height="600px">
  </div>

然后是对样式的设置：

 #back{
	top:50%;
	left:50%;
	margin-left:-300px;
	margin-top:-300px;
	position:absolute;
	z-index:1;
  }

这里是设置固定位置，这时候设定的left和top是相比較左上角的点来进行描写叙述的，之后将margin-left和margin-top分别设置成该div（这里表现为back的div）的长、宽的一半就可以

之后进行的是分针秒针和时针的放置。这里须要考虑两个问题：1、三个针都设为固定位置，而且转动的点要确定，分层层级要明显。2、实现绕固定点的转动（这个是比較纠结的地方）

*******************绕固定点转动

提及转动，在前面我们曾实现过仅仅要css要div动起来，这里实现的基本原理也是一样。这样我们就能够用transform：rotate（---deg）。于是我就用这个进行转动，结果我发现我无法让图片在固定点上转动，它仅仅能以div自身的中心进行转动。那这该怎样办，困惑好久之后，终于我想了一个办法，既然中心是固定的，那我就把想要绕之转动的那个固定点放在中心上。不就能够生成绕固定点转动的假象了么，至于还有一半的部分。我将底色该为与表盘颜色同样，而且设置透明度opacity为最大值。实现全然透明，于是就有了以下的编码：

html部分：

<div id="miao" style="height:320px;background:#fff;20px;-moz-opacity:1;">
   <div style="height:30px;20px;opacity:1;"></div>
	 <div>
		<img src="miao320.jpg" height="180px">
	</div>
  </div>
   <div id="fen"  style="height:320px;background:#fff;20px;-moz-opacity:1;">
   <div style="height:20px;20px;"></div>
	<img src="fen32035.jpg" height="180px">
  </div>
   <div id="shi"  style="height:320px;background:#fff;20px;-moz-opacity:1;">
   <div style="height:30px;20px;"></div>
	<img src="shi32035.jpg" height="175px">
  </div>

这里由于图片改的有些粗糙，所以设定的距离不同，看css的样式设置：

  #miao{
	top:50%;
	left:50%;
	margin-top:-140px;
	margin-left:-10px;
	position:absolute;
	z-index:2;
  }
#fen{
	top:50%;
	left:50%;
	margin-top:-140px;
	margin-left:-5px;
	position:absolute;
	z-index:3;
  }
 #shi{
	top:50%;
	left:50%;
	margin-top:-140px;
	margin-left:-5px;
	position:absolute;
	z-index:4;

最后就是利用js动态改变旋转的角度，来看以下的实现方法：

<script type="text/javascript">
	window.onload=function(){
		var miao=document.getElementById("miao");
		var fen=document.getElementById("fen");
		var shi=document.getElementById("shi");
		var hour;//当前时
		var minute;//当前分
		var second;//当前秒
		var circleHour;//时针转动的角度
		var circleMinute;//分针转动的角度
		var circleSecond;//秒针转动的角度

		var cycle=setInterval(function(){
			var nowDate=new Date();//每次读取当前时间
			hour=nowDate.getHours();
			circleHour=(parseInt(hour)%12)*30;
			shi.style.transform="rotate("+circleHour+"deg)";//读取到的时间为24小时制，转换为12小时
			minute=nowDate.getMinutes();
			fen.style.transform="rotate("+parseInt(minute)*6+"deg)";
			second=nowDate.getSeconds();
			miao.style.transform="rotate("+parseInt(second)*6+"deg)";
		},1000);//每1000毫秒调用一次方法
	}
  </script>

这样来看，效果就出来了。尽管有些粗糙，可是还是让我开心不已，至于角度的获取都是些基础的思路了，就不多赘述了。

这样感觉起来，确实东西没用多少，为什么刚開始在做的时候柑感觉那么难的..........

版权声明：本文博客原创文章，博客，未经同意，不得转载。