CSS3 transition & setInterval 應用 - 小時鐘

基本上這個東西不用jQuery也弄的出來，不過自從用了jQuery以後我怎樣都不會想回去乖乖用JS，因為兩者在CSS Selector 的發揮上有著天跟地的差別，一個是可以直接對元素下命令，一個是要先去找出元素...

這個東西用到了CSS3新的功能 圖片旋轉，舊版的CSS也是有這個功能，不過嘛...難用就算了還要扯到一堆有的沒的，一整個就是麻煩所以能用新的就用新的吧~ 不過新的問題就在徹底不鳥IE才能用(默)，想體驗新東西的人奉勸早點跟IE說掰掰吧...

關於CSS3旋轉的程式碼是參考這篇文章
CSS3 transition實現超酷圖片牆動畫效果

裡面有介紹不少好玩的transition的動畫效果，用CSS就可以作到JS操作，但是悲劇的是裡面一就要用到不少各瀏覽器的私自設定...還沒有到全部瀏覽器都能用一行語法解決的地步。

恩 ... Blogger 鎖住setInterval 跟 setTimeout  ，真煩...這樣時鐘就不會自動更新了.. 

結果在跟Google奮戰了半天以後因為這篇文章 jQuery中使用setInterval、setTimeout的方法 而解決了 囧... 不會報錯真是麻煩(迷之音：誰叫你用Blogger來實驗jQuery的)。

具體來說錯誤就是不能直接在jQuery裡面用JavaScript的方式呼叫setInterval 或 setTimeout...要改用以下方法。

方法1. 直接在ready中調用其他方法，會提示缺少對象的錯誤，應用jQuery的擴展可以解決這個問題。

$(document).ready(function(){

$.extend({
  show:function(){
   alert("ready");
  }
});
setInterval("$.show()",3000);
});

方法2. 指定定時執行的函數時不要使用引號和括號。

function show(){
   alert("ready");
}
setInterval(show,3000);// 注意涵數名沒有引號和括弧！

既然提到了這兩個東西，就順便來講setTimeout跟setInterval的差別，主要差別就是setTimeout是"隔一段時間"呼叫一次 - 不會重複，setInterval則是"每隔一段時間"就呼叫一次
- 會重複，所以setTimeout要搭配Recursive來達成隔一段時間就重複呼叫來達到setIntervale的效果，既然都有更簡單的函式就快投向setIntervale的懷抱吧XD。

現在時間: 00:00:00