JavaScript之創意時鐘項目(執行個體講解)，javascript執行個體講解

JavaScript之創意時鐘項目(執行個體講解)，javascript執行個體講解

“時鐘展示項目”說明文檔（文檔尾部附有相應代碼）

一、最終效果展示：

二、項目亮點

1.代碼結構清晰明了

2.可以即時動態顯示目前時間與當前日期

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

4.提高瀏覽器安全色性

三、知識點匯總：

jQuery、原生javascript、css3、h5

四、重痛點解釋

1.各個指標的旋轉角度的擷取

首先要明確如下概念：

時鐘指標旋轉一周360度

時針：

錶盤上共有12小時，每經過一小時，要旋轉30度；

分針：

錶盤上共有60個小格子，分針每走一分鐘，經過一個小格子，轉動6度；

秒針：

錶盤上共有60個小格子，秒針每走一分鐘，經過一個小格子，也轉動6度；

（1）目前時間的擷取

舉個例子（以時針旋轉角度計算為例）： 比如現在時間是 9：28；

時針應該在9和10之間，而通過 方式只能擷取到整點，所以既要擷取到當前的小時，也要擷取到當前的分鐘，這樣才能更好的來確定時針的旋轉角度，即為如下方式：

（2）旋轉角度的擷取

由於時針每經過一個小時後，旋轉30度，故擷取時針旋轉角度如下：

同理，分針與秒針的旋轉角度如下：

分針：

秒針：

為了使時鐘更加的精準，這裡精確到了毫秒；

（3）執行頻率，即秒針旋轉頻率控制

調整函數的執行時間間隔即可改變秒針轉動頻率。

五、項目待最佳化之處

1．頁面過於簡潔，有待進一步最佳化和改進；

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

六、項目中各部分代碼

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的引用包（百度或者Google一下你就知道）

（2）js代碼

$(document).ready(function () { //動態插入HTML代碼，標記時鐘  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'); //每一秒鐘更新時鐘視圖的自動執行函數 //也可以使用此方法： setInterval (function Clock (){})(); (function Clock() {  //得到日期和時間  var date = new Date().getDate(),  //得到當前日期   hours = new Date().getHours(),  //得到當前小時   minutes = new Date().getMinutes();  //得到當前分鐘   seconds = new Date().getSeconds(),  //得到當前秒    ms = new Date().getMilliseconds();//得到當前毫秒  //將當前日期顯示在時鐘上  $("#date").html(date);  //擷取當前秒數，確定秒針位置  var srotate = seconds + ms / 1000;  $("#seconds").css({   //確定旋轉角度   'transform': 'rotate(' + srotate * 6 + 'deg)',    });  //擷取當前分鐘數，得到分針位置  var mrotate = minutes + srotate / 60;   $("#minutes").css({   'transform': 'rotate(' + mrotate * 6 + 'deg)',   //提高瀏覽器的相容性   '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',   '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'  });  //擷取當前小時，得到時針位置  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)'  });  //每一秒後執行一次時鐘函數  setTimeout(Clock, 1000); })();});

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

注釋：

1.Transform 屬性

2.rotate() 方法

以上這篇JavaScript之創意時鐘項目(執行個體講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。