小編給大家分享一下JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、電子商務(wù)商城網(wǎng)站建設(shè),微信小程序定制開發(fā),軟件按需搭建網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn),我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合,為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案,成都創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。
一、最終效果展示:
二、項(xiàng)目亮點(diǎn)
1.代碼結(jié)構(gòu)清晰明了
2.可以實(shí)時(shí)動(dòng)態(tài)顯示當(dāng)前時(shí)間與當(dāng)前日期
3.界面簡(jiǎn)潔、美觀、大方
4.提高瀏覽器兼容性
三、知識(shí)點(diǎn)匯總:
jQuery、原生javascript、css3、h6
四、重難點(diǎn)解釋
1.各個(gè)指針的旋轉(zhuǎn)角度的獲取
首先要明確如下概念:
時(shí)鐘指針旋轉(zhuǎn)一周360度
時(shí)針:
表盤上共有12小時(shí),每經(jīng)過(guò)一小時(shí),要旋轉(zhuǎn)30度;
分針:
表盤上共有60個(gè)小格子,分針每走一分鐘,經(jīng)過(guò)一個(gè)小格子,轉(zhuǎn)動(dòng)6度;
秒針:
表盤上共有60個(gè)小格子,秒針每走一分鐘,經(jīng)過(guò)一個(gè)小格子,也轉(zhuǎn)動(dòng)6度;
(1)當(dāng)前時(shí)間的獲取
舉個(gè)例子(以時(shí)針旋轉(zhuǎn)角度計(jì)算為例): 比如現(xiàn)在時(shí)間是 9:28;
時(shí)針應(yīng)該在9和10之間,而通過(guò) 方式只能獲取到整點(diǎn),所以既要獲取到當(dāng)前的小時(shí),也要獲取到當(dāng)前的分鐘,這樣才能更好的來(lái)確定時(shí)針的旋轉(zhuǎn)角度,即為如下方式:
(2)旋轉(zhuǎn)角度的獲取
由于時(shí)針每經(jīng)過(guò)一個(gè)小時(shí)后,旋轉(zhuǎn)30度,故獲取時(shí)針旋轉(zhuǎn)角度如下:
同理,分針與秒針的旋轉(zhuǎn)角度如下:
分針:
秒針:
為了使時(shí)鐘更加的精準(zhǔn),這里精確到了毫秒;
(3)執(zhí)行頻率,即秒針旋轉(zhuǎn)頻率控制
調(diào)整函數(shù)的執(zhí)行時(shí)間間隔即可改變秒針轉(zhuǎn)動(dòng)頻率。
五、項(xiàng)目待優(yōu)化之處
1.頁(yè)面過(guò)于簡(jiǎn)潔,有待進(jìn)一步優(yōu)化和改進(jìn);
2.作圖時(shí)未來(lái)得及在時(shí)鐘上畫上分秒的刻度;
六、項(xiàng)目中各部分代碼
1.HTML代碼
jQuery指針時(shí)鐘(附帶日期)
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(時(shí)鐘樣式)*/ #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)需要下載一個(gè)js的引用包(百度或者谷歌一下你就知道)
(2)js代碼
$(document).ready(function () { //動(dòng)態(tài)插入HTML代碼,標(biāo)記時(shí)鐘 var clock = [ '
4.一些必要的圖片素材(c此處不再一一列舉或展示)
注釋:
1.Transform 屬性
2.rotate() 方法
以上是“JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!