史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来。
对比样子差了好多啊,但是基本功能都是实现了的,只要修改样式就好了,我的美感特别差,所以就……
我用的是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,希望你们能够做出更好的效果。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版