转载《时钟效果》

Posted 苍狼一笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转载《时钟效果》相关的知识,希望对你有一定的参考价值。

今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来。

对比样子差了好多啊,但是基本功能都是实现了的,只要修改样式就好了,我的美感特别差,所以就……

我用的是css3和js实现的这个效果,渐变是由css3的linear-gradient实现,当然js也有实现的办法,不过js实现到底不如css3实现简单,所以就不赘述了。有兴趣的可以下来自己看看。

时钟的旋转是由css的transform:rotate实现,js进行控制。

废话不多说,直接来代码。首先就是html标签

<div id="tab">
<div id="Tradion">
<div id="hours" class="tran"></div>
<div id="minutes" class="tran"></div>
<div id="seconds" class="tran"></div>
<div id="dian"></div>

</div>
<h1 id="aTime"></h1>
<h3 id="aDate"></h3>
<h2 id="week"></h2>
</div>

这个代码没什么,css布局代码如下:

<style type="text/css">
#tab{
width: 500px;
height: 200px;
/*background:-webkit-gradient(linear,center top,center bottom,from(blue), to(white));*/
background: -webkit-linear-gradient(top,#007fff,#84bff9);/*css3设置渐变*/
margin-bottom: 100px;
}
#aTime{
color: #fff;
/*text-align: center;*/
/*line-height: 200px;*/
float: left;
}
#Tradion{
width: 100px;
height: 100px;
border: 2px solid #fff;
border-radius: 100px;
float: left;
margin: 50px 50px;
}
#hours{
width: 30px;
height: 2px;
margin:50px 50px;
background: #fff;
transform-origin: left bottom;
}
#minutes{
width: 38px;
height: 2px;
background: #fff;
margin:-50px 50px;
transform-origin: left bottom;
transform:rotate(0deg);
}
#seconds{
width: 45px;
height: 1px;
background: #fff;
margin:50px 50px;
transform-origin: left bottom;
transform:rotate(0deg);

}
.tran{
transform: rotate(-90deg);/*这里测试了一下旋转角*/
}
#dian{
width:6px;
height: 6px;
border-radius: 6px;
background: #fff;
margin:-55px 46px;
}
#aDate,#week{
color: #fff;
padding-top: 50px;
}
</style>

实现了css之后的效果是这样的

只有一个时钟的样子,接下来就是js进行控制了

首先来时间显示和钟表转动的代码

<script type="text/javascript">
window.onload=function(){
function addzero(num){
if(num>=10)
{
return ""+num;
}
else
{
return "0"+num;
}
}

function times(){
var date=new Date();
var aTime=document.getElementById(\'aTime\');
var str= addzero(date.getHours())+":"+ addzero(date.getMinutes())+":"+ addzero(date.getSeconds());
aTime.innerHTML=str;
}
setInterval(times,1000);
times();
function Ttranform(){
var date=new Date();
var hours=document.getElementById(\'hours\');
var minutes=document.getElementById(\'minutes\');
var seconds=document.getElementById(\'seconds\');
var num=date.getHours();
var num2=date.getMinutes();
var num3=date.getSeconds();
hours.style.transform="rotate("+(num*30-90)+"deg)";
minutes.style.transform="rotate("+(num2*6-90)+"deg)";
seconds.style.transform="rotate("+(num3*6-90)+"deg)";

}
setInterval(Ttranform,1000);
Ttranform();
}
</script>

还差一个日期的显示代码,这个就简单了,完全跟时间显示的一样啊,

复制代码
<script type="text/javascript">
        function Adate(){
                var date=new Date();
                var aDate=document.getElementById("aDate");
                var week=document.getElementById(\'week\');
                var weekList=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                var str= date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
                aDate.innerHTML=str;
                var westr=weekList[date.getDay()];
                week.innerHTML=westr;
            }
            Adate();
    </script>
复制代码

先说一下啊,时间显示 getMonth()他认为这个月是从0开始的

getDate(日)
getDay(星期 0 1 2 3 4 5 6 )

这两个函数也不要弄混了哦。

 hours.style.transform="rotate("+(num*30-90)+"deg)";
 minutes.style.transform="rotate("+(num2*6-90)+"deg)";
 seconds.style.transform="rotate("+(num3*6-90)+"deg)";
角度计算为什么要减90deg是因为我的初始角度是90度,大家如果要是从0度开始就不能减了。
上面就是我所实现的简单的时钟效果,是不是特别简单啊。大家自己可以试着改进,我这个实现还是太low,希望你们能够做出更好的效果。

 

以上是关于转载《时钟效果》的主要内容,如果未能解决你的问题,请参考以下文章

代码写响应式时钟效果

代码写响应式时钟效果

[12小时Javascript Clock显示24时间,错误的AM / PM

代码写响应式时钟效果

canvas实现的时钟效果

精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!(转载)