“時鐘展示項目”說明文檔（文檔尾部附有相應代碼） 一、最終效果展示： 二、項目亮點 1.代碼結構清晰明瞭 2.可以實時動態顯示當前時間與當前日期 3.界面簡潔、美觀、大方 4.提高瀏覽器相容性 三、知識點彙總： jQuery、原生javascript、css3、h5 四、重難點解釋 1.各個指針的旋 ...
“時鐘展示項目”說明文檔（文檔尾部附有相應代碼）
一、最終效果展示：
二、項目亮點
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代碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery指針時鐘（附帶日期）</title> 6 <!--引入外部css樣式--> 7 <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" /> 8 </head> 9 <body> 10 <!--引入jQuery庫文件--> 11 <script src="js/jquery-1.6.2.min.js"></script> 12 <!--引入外部js文件--> 13 <script src="js/script.js"></script> 14 <div style="text-align:center;clear:both"> 15 </div> 16 </body> 17 </html>View Code
2.css代碼
1 * 2 { 3 margin:0; 4 padding:0; 5 } 6 body 7 { 8 background:#f9f9f9; 9 color:#000; 10 font:15px Calibri, Arial, sans-serif; 11 text-shadow:1px 2px 1px #FFFFFF; 12 } 13 a, 14 a:visited 15 { 16 text-decoration:none; 17 outline:none; 18 color:#fff; 19 } 20 a:hover 21 { 22 text-decoration:underline; 23 color:#ddd; 24 } 25 /*the footer （尾部）*/ 26 footer 27 { 28 background:#444 url("../images/bg-footer.png") repeat; 29 position:fixed; 30 width:100%; 31 height:70px; 32 bottom:0; 33 left:0; 34 color:#fff; 35 text-shadow:2px 2px #000; 36 /*提高瀏覽器的相容性*/ 37 -moz-box-shadow:5px 1px 10px #000; 38 -webkit-box-shadow:5px 1px 10px #000; 39 box-shadow:5px 1px 10px #000; 40 } 41 footer h1 42 { 43 font:25px/26px Acens; 44 font-weight:normal; 45 left:50%; 46 margin:0px 0 0 150px; 47 padding:25px 0; 48 position:relative; 49 width:400px; 50 } 51 footer a.orig, 52 a.orig:visited 53 { 54 background:url("../images/demo2.png") no-repeat right top; 55 border:none; 56 text-decoration:none; 57 color:#FCFCFC; 58 font-size:14px; 59 height:70px; 60 left:50%; 61 line-height:50px; 62 margin:12px 0 0 -400px; 63 position:absolute; 64 top:0; 65 width:250px; 66 } 67 /*styling for the clock（時鐘樣式）*/ 68 #clock 69 { 70 position: relative; 71 width: 600px; 72 height: 600px; 73 list-style: none; 74 margin: 20px auto; 75 background: url('../images/clock.png') no-repeat center; 76 77 } 78 #seconds, 79 #minutes, 80 #hours 81 { 82 position: absolute; 83 width: 30px; 84 height: 580px; 85 left: 270px; 86 } 87 #date 88 { 89 position: absolute; 90 top: 365px; 91 color: #666; 92 right: 140px; 93 font-weight: bold; 94 letter-spacing: 3px; 95 font-family: "微軟雅黑"; 96 font-size: 30px; 97 line-height: 36px; 98 } 99 #hours 100 { 101 background: url('../images/hands.png') no-repeat left; 102 z-index: 1000; 103 } 104 #minutes 105 { 106 background: url('../images/hands.png') no-repeat center; 107 width:25px; 108 z-index: 2000; 109 } 110 111 #seconds 112 { 113 background: url('../images/hands.png') no-repeat right; 114 z-index: 3000; 115 }View Code
3.js代碼
（1）需要下載一個js的引用包（百度或者谷歌一下你就知道）
（2）js代碼
1 $(document).ready(function () { 2 3 //動態插入HTML代碼，標記時鐘 4 var clock = [ 5 '<ul id="clock">', 6 '<li id="date"></li>', 7 '<li id="seconds"></li>', 8 '<li id="hours"></li>', 9 '<li id="minutes"></li>', 10 '</ul>'].join(''); 11 12 // 逐漸顯示時鐘，並把它附加到主頁面中 13 $(clock).fadeIn().appendTo('body'); 14 15 //每一秒鐘更新時鐘視圖的自動執行函數 16 //也可以使用此方法： setInterval (function Clock (){})(); 17 (function Clock() { 18 //得到日期和時間 19 var date = new Date().getDate(), //得到當前日期 20 hours = new Date().getHours(), //得到當前小時 21 minutes = new Date().getMinutes(); //得到當前分鐘 22 seconds = new Date().getSeconds(), //得到當前秒 23 ms = new Date().getMilliseconds();//得到當前毫秒 24 //將當前日期顯示在時鐘上 25 $("#date").html(date); 26 //獲取當前秒數，確定秒針位置 27 var srotate = seconds + ms / 1000; 28 $("#seconds").css({ 29 //確定旋轉角度 30 'transform': 'rotate(' + srotate * 6 + 'deg)', 31 }); 32 //獲取當前分鐘數，得到分針位置 33 var mrotate = minutes + srotate / 60; 34 $("#minutes").css({ 35 'transform': 'rotate(' + mrotate * 6 + 'deg)', 36 //提高瀏覽器的相容性 37 '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)', 38 '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)' 39 }); 40 //獲取當前小時，得到時針位置 41 var hrotate = hours % 12 + (minutes / 60); 42 $("#hours").css({ 43 'transform': 'rotate(' + hrotate * 30 + 'deg)', 44 //提高瀏覽器的相容性 45 '-moz-transform': 'rotate(' + hrotate * 30 + 'deg)', 46 '-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)' 47 }); 48 //每一秒後執行一次時鐘函數 49 setTimeout(Clock, 1000); 50 })(); 51 });View Code
4.一些必要的圖片素材（c此處不再一一列舉或展示）
註釋：
1.Transform 屬性
2.rotate() 方法
