<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鍾表</title> <style type="text/css"> /*鍾表圓圈的樣式*/ .circle { position: relative; margin: 150px auto; width: 200px; height: 200px; border: 2px solid black; border-radius: 100px; } /*時針*/ #hour { position: absolute; top: 97px; left: 97px; width: 6px; height: 60px; background-color: blue; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*分針*/ #min { position: absolute; top: 98px; left: 98px; width: 4px; height: 80px; background-color: forestgreen; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*秒針*/ #sec { position: absolute; top: 99px; left: 99px; width: 2px; height: 90px; background-color: chocolate; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*鍾表中心圓點*/ #point { position: absolute; z-index: 1; top: 90px; left: 90px; width: 20px; height: 20px; background-color: black; border-radius: 10px; } /*鍾表刻度*/ ul li { list-style: none; position: absolute; top: 100px; left: 99px; width: 2px; height: 97px; border-bottom: 4px solid black; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } /*鍾表小時刻度，就是長一點的那個刻度*/ ul li.lang { height: 93px; border-bottom: 8px solid black; } </style> </head> <body> <div class="circle"> <div id="point"></div> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <ul> </ul> </div> </body> <script type="text/javascript"> // 分別獲取時針，分針，秒針和刻度的父元素ul var hour=document.getElementById("hour"); var min=document.getElementById("min"); var sec=document.getElementById("sec"); var oul=document.getElementsByTagName("ul")[0]; // 動態創建60個li表示鍾表刻度並添加到父元素ul內 var olis=""; for (var i=0;i<60;i++){ olis+="<li></li>"; } oul.innerHTML=olis; // 獲取創建好的每一個li var oLis=document.getElementsByTagName("li"); for(var i=0;i<60;i++){ // 每隔五個就有一個小時刻度，讓它獲取lang這個樣式 if(i%5==0){ oLis[i].className="lang"; } // 整圓360度，每一個刻度是6度，讓第i個li旋轉6i度 oLis[i].style.transform="rotateZ("+i*6+"deg)"; } var timer = null; function run(){ //每次執行前關閉並清除之前的定時器，節約性能 clearTimeout(timer); timer = null; var nowDate=new Date; //但是如果當前時間是12點半，時針不應該是直直的指向12點，應該是在12和1之間， //所以就需要把當前多出的分鍾數/60換算成小時數加起來，下面在計算角度的時候也就可以對應上了。 //分針同樣如此 var s=nowDate.getSeconds(); sec.style.transform="rotateZ("+(s*6+180)+"deg)"; sec.style.webkitTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.oTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.msTransform="rotateZ("+(s*6+180)+"deg)"; sec.style.mozTransform="rotateZ("+(s*6+180)+"deg)"; //得到每一秒的旋轉角度（每一秒是走6度） var m=nowDate.getMinutes()+s/60; min.style.transform="rotateZ("+(m*6+180)+"deg)"; min.style.oTransform="rotateZ("+(m*6+180)+"deg)"; min.style.webkitTransform="rotateZ("+(m*6+180)+"deg)"; min.style.msTransform="rotateZ("+(m*6+180)+"deg)"; min.style.mozTransform="rotateZ("+(m*6+180)+"deg)"; //得到每一分鍾走的角度 每一小時之間是30 / 一小時中間有5個格 =30/5=6度 //每小時走360/12=30度 var h=nowDate.getHours()+m/60; hour.style.transform="rotateZ("+(h*30+180)+"deg)"; hour.style.oTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.msTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.mozTransform="rotateZ("+(h*30+180)+"deg)"; hour.style.webkitTransform="rotateZ("+(h*30+180)+"deg)"; //開啟定時器，每一秒自動走 var timer=window.setTimeout(run,1000); } //執行函數 run(); </script> </html>