js+css3實現動態時鐘-------Day66，css3-------day66

js+css3實現動態時鐘-------Day66，css3-------day66

昨天搬家一天，寬頻到最後也沒有安裝上，頗為惱火，但是收拾了一天新租的房屋，倒有了頗多的想法，這裡先來實現一個--動態時鐘（已經上傳到資源裡了，圖片整的有些粗糙了，汗...）

這裡來記錄下，這個看起來簡單好實現的功能，我在實現的過程中碰到了哪些問題，因為這時還沒查看網上的代碼，只是根據自己現階段的學習來做的，可能會有些麻煩，有些粗糙，但是終歸是實現了這個效果，心裡還是小開心了下。

先來張最終實現的（靜態圖片）;

首先準備素材，我從網上搜到了一個時鐘的素材，誰讓我的ps還菜的菜呢，然後我有了錶盤、時針、分針和秒針，這樣組成一個鬧鐘的基本元素就全了；

然後就是對素材的放置，這裡是解決的第一個問題，雖然是自找的問題，（我將它放在了頁面中間）

**********css實現置中*******

來看一下實現的代碼;

html部分

 <div id="back"><img src="back.jpg" width="600px" height="600px">  </div>

然後是對樣式的設定：

 #back{top:50%;left:50%;margin-left:-300px;margin-top:-300px;position:absolute;z-index:1;  }

這裡是設定固定位置，這時候設定的left和top是相比較左上方的點來進行描述的，之後將margin-left和margin-top分別設定成該div（這裡表現為back的div）的長、寬的一半即可

之後進行的是分針秒針和時針的放置，這裡需要考慮兩個問題：1、三個針都設為固定位置，並且轉動的點要確定，分層層級要明顯；2、實現繞固定點的轉動（這個是比較糾結的地方）

*******************繞固定點轉動

提及轉動，在前面我們曾實現過只要css要div動起來，這裡實現的基本原理也是一樣，這樣我們就可以用transform：rotate（---deg），於是我就用這個進行轉動，結果我發現我無法讓圖片在固定點上轉動，它只能以div自身的中心進行轉動，那這該如何辦，困惑好久之後，最終我想了一個辦法，既然中心是固定的，那我就把想要繞之轉動的那個固定點放在中心上，不就可以產生繞固定點轉動的假象了麼，至於另一半的部分，我將底色該為與錶盤顏色相同，並且設定透明度opacity為最大值，實現完全透明，於是就有了下面的編碼：

html部分：

<div id="miao" style="height:320px;background:#fff;width:20px;-moz-opacity:1;">   <div style="height:30px;width:20px;opacity:1;"></div> <div><img src="miao320.jpg" height="180px"></div>  </div>   <div id="fen"  style="height:320px;background:#fff;width:20px;-moz-opacity:1;">   <div style="height:20px;width:20px;"></div><img src="fen32035.jpg" height="180px">  </div>   <div id="shi"  style="height:320px;background:#fff;width:20px;-moz-opacity:1;">   <div style="height:30px;width:20px;"></div><img src="shi32035.jpg" height="175px">  </div>

這裡因為圖片改的有些粗糙，所以設定的距離不同，看css的樣式設定：

  #miao{top:50%;left:50%;margin-top:-140px;margin-left:-10px;position:absolute;z-index:2;  }#fen{top:50%;left:50%;margin-top:-140px;margin-left:-5px;position:absolute;z-index:3;  } #shi{top:50%;left:50%;margin-top:-140px;margin-left:-5px;position:absolute;z-index:4;

最後就是 利用js動態改變旋轉的角度，來看下面的實現方法：

<script type="text/javascript">window.onload=function(){var miao=document.getElementById("miao");var fen=document.getElementById("fen");var shi=document.getElementById("shi");var hour;//當前時var minute;//當前分var second;//當前秒var circleHour;//時針轉動的角度var circleMinute;//分針轉動的角度var circleSecond;//秒針轉動的角度var cycle=setInterval(function(){var nowDate=new Date();//每次讀取目前時間hour=nowDate.getHours();circleHour=(parseInt(hour)%12)*30;shi.style.transform="rotate("+circleHour+"deg)";//讀取到的時間為24小時制，轉換為12小時minute=nowDate.getMinutes();fen.style.transform="rotate("+parseInt(minute)*6+"deg)";second=nowDate.getSeconds();miao.style.transform="rotate("+parseInt(second)*6+"deg)";},1000);//每1000毫秒調用一次方法}  </script>

這樣來看，效果就出來了，雖然有些粗糙，但是還是讓我開心不已，至於角度的擷取都是些基礎的思路了，就不多贅述了。

這樣感覺起來，確實東西沒用多少，為什麼剛開始在做的時候柑感覺那麼難的..........

js怎設定css3樣式

不知道你要做什麼 通過js直接設定這個值沒意義

如果只是要實現對象旋轉 只需要在觸發事件中動態調整 對象的 class

比如一個圖片當滑鼠移上去之後 圖片旋轉

<img class='onmoveout' onmousein="this.setAttribute('class','onmovein') onmouseout="this.setAttribute('class','onmoveout');">
 
Windows8 Metro菜單的這個顯示效果用CSS3或JS怎實現?

css3動畫 透明度改變 位置改變 和大小改變