昨天,有一天招,宽带到底没装上。相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了–动态时钟(它已上载的资源,一些粗略的全貌。汗…)
这里记录。这个看似简单的功能,以达到良好的,我在的实施过程中遇到了哪些问题。代码,仅仅是依据自己现阶段的学习来做的,可能会有些麻烦。有些粗糙,可是终归是实现了这个效果,心里还是小开心了下。
先来张终于实现的效果图(静态图片);
首先准备素材,我从网上搜到了一个时钟的素材,谁让我的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>
这样来看,效果就出来了。尽管有些粗糙,可是还是让我开心不已,至于角度的获取都是些基础的思路了,就不多赘述了。
这样感觉起来,确实东西没用多少,为什么刚開始在做的时候柑感觉那么难的……….
版权声明:本文博客原创文章,博客,未经同意,不得转载。