腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript之創(chuàng)意時鐘項(xiàng)目(實(shí)例講解)

更新時間：2017年10月23日 08:43:42 作者：青衫故人1

下面小編就為大家?guī)硪黄狫avaScript之創(chuàng)意時鐘項(xiàng)目。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

“時鐘展示項(xiàng)目”說明文檔（文檔尾部附有相應(yīng)代碼）

一、最終效果展示：

二、項(xiàng)目亮點(diǎn)

1.代碼結(jié)構(gòu)清晰明了

2.可以實(shí)時動態(tài)顯示當(dāng)前時間與當(dāng)前日期

3.界面簡潔、美觀、大方

4.提高瀏覽器兼容性

三、知識點(diǎn)匯總：

jQuery、原生javascript、css3、h5

四、重難點(diǎn)解釋

1.各個指針的旋轉(zhuǎn)角度的獲取

首先要明確如下概念：

時鐘指針旋轉(zhuǎn)一周360度

時針：

表盤上共有12小時，每經(jīng)過一小時，要旋轉(zhuǎn)30度；

分針：

表盤上共有60個小格子，分針每走一分鐘，經(jīng)過一個小格子，轉(zhuǎn)動6度；

秒針：

表盤上共有60個小格子，秒針每走一分鐘，經(jīng)過一個小格子，也轉(zhuǎn)動6度；

（1）當(dāng)前時間的獲取

舉個例子（以時針旋轉(zhuǎn)角度計(jì)算為例）：比如現(xiàn)在時間是 9：28；

時針應(yīng)該在9和10之間，而通過方式只能獲取到整點(diǎn)，所以既要獲取到當(dāng)前的小時，也要獲取到當(dāng)前的分鐘，這樣才能更好的來確定時針的旋轉(zhuǎn)角度，即為如下方式：

（2）旋轉(zhuǎn)角度的獲取

由于時針每經(jīng)過一個小時后，旋轉(zhuǎn)30度，故獲取時針旋轉(zhuǎn)角度如下：

同理，分針與秒針的旋轉(zhuǎn)角度如下：

分針：

秒針：

為了使時鐘更加的精準(zhǔn)，這里精確到了毫秒；

（3）執(zhí)行頻率，即秒針旋轉(zhuǎn)頻率控制

調(diào)整函數(shù)的執(zhí)行時間間隔即可改變秒針轉(zhuǎn)動頻率。

五、項(xiàng)目待優(yōu)化之處

1．頁面過于簡潔，有待進(jìn)一步優(yōu)化和改進(jìn)；

2．作圖時未來得及在時鐘上畫上分秒的刻度；

六、項(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指針時鐘（附帶日期）</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 style="text-align:center;clear:both">
 </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 h1
{
 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 () {

 //動態(tài)插入HTML代碼，標(biāo)記時鐘 
 var clock = [
  '<ul id="clock">',
  '<li id="date"></li>',
  '<li id="seconds"></li>',
  '<li id="hours"></li>',
  '<li id="minutes"></li>',
  '</ul>'].join('');

 // 逐漸顯示時鐘，并把它附加到主頁面中 
 $(clock).fadeIn().appendTo('body');

 //每一秒鐘更新時鐘視圖的自動執(zhí)行函數(shù)
 //也可以使用此方法： setInterval (function Clock (){})();
 (function Clock() {
  //得到日期和時間
  var date = new Date().getDate(),  //得到當(dāng)前日期
   hours = new Date().getHours(),  //得到當(dāng)前小時
   minutes = new Date().getMinutes();  //得到當(dāng)前分鐘
   seconds = new Date().getSeconds(),  //得到當(dāng)前秒
    ms = new Date().getMilliseconds();//得到當(dāng)前毫秒
  //將當(dāng)前日期顯示在時鐘上
  $("#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)前小時，得到時針位置
  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ù)
  setTimeout(Clock, 1000);
 })();
});

4.一些必要的圖片素材（c此處不再一一列舉或展示）

注釋：

1.Transform 屬性