溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、最終效果展示：
二、項(xiàng)目亮點(diǎn)
1.代碼結(jié)構(gòu)清晰明了
2.可以實(shí)時(shí)動(dòng)態(tài)顯示當(dāng)前時(shí)間與當(dāng)前日期
3.界面簡潔、美觀、大方
4.提高瀏覽器兼容性
三、知識(shí)點(diǎn)匯總：
jQuery、原生javascript、css3、h6
四、重難點(diǎn)解釋
1.各個(gè)指針的旋轉(zhuǎn)角度的獲取
首先要明確如下概念：
時(shí)鐘指針旋轉(zhuǎn)一周360度
時(shí)針：
表盤上共有12小時(shí)，每經(jīng)過一小時(shí)，要旋轉(zhuǎn)30度；
分針：
表盤上共有60個(gè)小格子，分針每走一分鐘，經(jīng)過一個(gè)小格子，轉(zhuǎn)動(dòng)6度；
秒針：
表盤上共有60個(gè)小格子，秒針每走一分鐘，經(jīng)過一個(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之間，而通過
方式只能獲取到整點(diǎn)，所以既要獲取到當(dāng)前的小時(shí)，也要獲取到當(dāng)前的分鐘，這樣才能更好的來確定時(shí)針的旋轉(zhuǎn)角度，即為如下方式：
（2）旋轉(zhuǎn)角度的獲取
由于時(shí)針每經(jīng)過一個(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．頁面過于簡潔，有待進(jìn)一步優(yōu)化和改進(jìn)；
2．作圖時(shí)未來得及在時(shí)鐘上畫上分秒的刻度；
六、項(xiàng)目中各部分代碼
1.HTML代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery指針時(shí)鐘（附帶日期）</title> <!--引入外部css樣式--> <link rel="stylesheet" href="css/demo.css" rel="external nofollow" type="text/css" media="screen" /> </head> <body> <!--引入jQuery庫文件--> <script src="js/jquery-1.6.2.min.js"></script> <!--引入外部js文件--> <script src="js/script.js"></script> <div > </div> </body> </html>
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 = [
'<ul id="clock">',
'<li id="date"></li>',
'<li id="seconds"></li>',
'<li id="hours"></li>',
'<li id="minutes"></li>',
'</ul>'].join('');
// 逐漸顯示時(shí)鐘，并把它附加到主頁面中
$(clock).fadeIn().appendTo('body');
//每一秒鐘更新時(shí)鐘視圖的自動(dòng)執(zhí)行函數(shù)
//也可以使用此方法： setInterval (function Clock (){})();
(function Clock() {
//得到日期和時(shí)間
var date = new Date().getDate(), //得到當(dāng)前日期
hours = new Date().getHours(), //得到當(dāng)前小時(shí)
minutes = new Date().getMinutes(); //得到當(dāng)前分鐘
seconds = new Date().getSeconds(), //得到當(dāng)前秒
ms = new Date().getMilliseconds();//得到當(dāng)前毫秒
//將當(dāng)前日期顯示在時(shí)鐘上
$("#date").html(date);
//獲取當(dāng)前秒數(shù)，確定秒針位置
var srotate = seconds + ms / 1000;
$("#seconds").css({
//確定旋轉(zhuǎn)角度
'transform': 'rotate(' + srotate * 6 + 'deg)',
});
//獲取當(dāng)前分鐘數(shù)，得到分針位置
var mrotate = minutes + srotate / 60;
$("#minutes").css({
'transform': 'rotate(' + mrotate * 6 + 'deg)',
//提高瀏覽器的兼容性
'-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',
'-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'
});
//獲取當(dāng)前小時(shí)，得到時(shí)針位置
var hrotate = hours % 12 + (minutes / 60);
$("#hours").css({
'transform': 'rotate(' + hrotate * 30 + 'deg)',
//提高瀏覽器的兼容性
'-moz-transform': 'rotate(' + hrotate * 30 + 'deg)',
'-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'
});
//每一秒后執(zhí)行一次時(shí)鐘函數(shù)
setTimeout(Clock, 1000);
})();
});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)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼