标签:css3 javascript 学习记录
昨天搬家一天,宽带到最后也没有安装上,颇为恼火,但是收拾了一天新租的房屋,倒有了颇多的想法,这里先来实现一个--动态时钟(已经上传到资源里了,图片整的有些粗糙了,汗...)
这里来记录下,这个看起来简单好实现的功能,我在实现的过程中碰到了哪些问题,因为这时还没查看网上的代码,只是根据自己现阶段的学习来做的,可能会有些麻烦,有些粗糙,但是终归是实现了这个效果,心里还是小开心了下。
先来张最终实现的效果图(静态图片);
首先准备素材,我从网上搜到了一个时钟的素材,谁让我的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;width:20px;-moz-opacity:1;"> <div style="height:30px;width:20px;opacity:1;"></div> <div> <img src="miao320.jpg" height="180px"> </div> </div> <div id="fen" style="height:320px;background:#fff;width:20px;-moz-opacity:1;"> <div style="height:20px;width:20px;"></div> <img src="fen32035.jpg" height="180px"> </div> <div id="shi" style="height:320px;background:#fff;width:20px;-moz-opacity:1;"> <div style="height:30px;width: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>这样来看,效果就出来了,虽然有些粗糙,但是还是让我开心不已,至于角度的获取都是些基础的思路了,就不多赘述了。
这样感觉起来,确实东西没用多少,为什么刚开始在做的时候柑感觉那么难的..........
js+css3实现动态时钟-------Day66,布布扣,bubuko.com
标签:css3 javascript 学习记录
原文地址:http://blog.csdn.net/marsmile_tbo/article/details/37775031