JavaScript如何实现创意时钟项目
小编给大家分享一下JavaScript如何实现创意时钟项目,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
公司专注于为企业提供成都网站设计、网站建设、外贸网站建设、微信公众号开发、电子商务商城网站建设,微信小程序定制开发,软件按需搭建网站等一站式互联网企业服务。凭借多年丰富的经验,我们会仔细了解各客户的需求而做出多方面的分析、设计、整合,为客户设计出具风格及创意性的商业解决方案,成都创新互联更提供一系列网站制作和网站推广的服务。
一、最终效果展示:
二、项目亮点
1.代码结构清晰明了
2.可以实时动态显示当前时间与当前日期
3.界面简洁、美观、大方
4.提高浏览器兼容性
三、知识点汇总:
jQuery、原生javascript、css3、h6
四、重难点解释
1.各个指针的旋转角度的获取
首先要明确如下概念:
时钟指针旋转一周360度
时针:
表盘上共有12小时,每经过一小时,要旋转30度;
分针:
表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6度;
秒针:
表盘上共有60个小格子,秒针每走一分钟,经过一个小格子,也转动6度;
(1)当前时间的获取
举个例子(以时针旋转角度计算为例): 比如现在时间是 9:28;
时针应该在9和10之间,而通过 方式只能获取到整点,所以既要获取到当前的小时,也要获取到当前的分钟,这样才能更好的来确定时针的旋转角度,即为如下方式:
(2)旋转角度的获取
由于时针每经过一个小时后,旋转30度,故获取时针旋转角度如下:
同理,分针与秒针的旋转角度如下:
分针:
秒针:
为了使时钟更加的精准,这里精确到了毫秒;
(3)执行频率,即秒针旋转频率控制
调整函数的执行时间间隔即可改变秒针转动频率。
五、项目待优化之处
1.页面过于简洁,有待进一步优化和改进;
2.作图时未来得及在时钟上画上分秒的刻度;
六、项目中各部分代码
1.HTML代码
jQuery指针时钟(附带日期)
2.css代码
* { margin:0; padding:0; } body { background:#f9f9f9; color:#000; font:15px Calibri, Arial, sans-serif; text-shadow:1px 2px 1px #FFFFFF; } a, a:visited { text-decoration:none; outline:none; color:#fff; } a:hover { text-decoration:underline; color:#ddd; } /*the footer (尾部)*/ footer { background:#444 url("../images/bg-footer.png") repeat; position:fixed; width:100%; height:70px; bottom:0; left:0; color:#fff; text-shadow:2px 2px #000; /*提高浏览器的兼容性*/ -moz-box-shadow:5px 1px 10px #000; -webkit-box-shadow:5px 1px 10px #000; box-shadow:5px 1px 10px #000; } footer h2 { font:25px/26px Acens; font-weight:normal; left:50%; margin:0px 0 0 150px; padding:25px 0; position:relative; width:400px; } footer a.orig, a.orig:visited { background:url("../images/demo2.png") no-repeat right top; border:none; text-decoration:none; color:#FCFCFC; font-size:14px; height:70px; left:50%; line-height:50px; margin:12px 0 0 -400px; position:absolute; top:0; width:250px; } /*styling for the clock(时钟样式)*/ #clock { position: relative; width: 600px; height: 600px; list-style: none; margin: 20px auto; background: url('../images/clock.png') no-repeat center; } #seconds, #minutes, #hours { position: absolute; width: 30px; height: 580px; left: 270px; } #date { position: absolute; top: 365px; color: #666; right: 140px; font-weight: bold; letter-spacing: 3px; font-family: "微软雅黑"; font-size: 30px; line-height: 36px; } #hours { background: url('../images/hands.png') no-repeat left; z-index: 1000; } #minutes { background: url('../images/hands.png') no-repeat center; width:25px; z-index: 2000; } #seconds { background: url('../images/hands.png') no-repeat right; z-index: 3000; }
3.js代码
(1)需要下载一个js的引用包(百度或者谷歌一下你就知道)
(2)js代码
$(document).ready(function () { //动态插入HTML代码,标记时钟 var clock = [ '
- ',
'',
'',
'',
'',
'
4.一些必要的图片素材(c此处不再一一列举或展示)
注释:
1.Transform 属性
2.rotate() 方法
以上是“JavaScript如何实现创意时钟项目”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文标题:JavaScript如何实现创意时钟项目
网站路径:http://pwwzsj.com/article/geicsp.html