之前學習了下html5中的canvas元素，為了練練手就實現了一個簡易的時鍾。時鍾本身並不復雜，也沒有使用圖片進行美化，不過麻雀雖小五臟俱全，下面就與大家分享一下： 實現效果： html代碼： JS代碼 ...

老師上課需要我們做一個時鍾的小作業 ，我把它放在上面記錄一下啦 表盤和時針我都是用的背景圖的形式，然后絕對定位，通過調整left和top確定時針、分針、秒針的位置，transform-origin設置它們的旋轉中心 具體效果： HTML代碼： css代碼： JS代碼（設置一個定時器 ...

這里隨便附的幾張圖，代碼中用到的也可以自行調換哦~ clock.jpg hour.png minute.png second.png ...

（效果圖） 分兩步進行的。 第一步： 要得到現在的 時 分 秒 但是這里面有一個小玄機 。 比如現在是 9點整 時針指向 9 是沒錯的 但是如果現在是 9點半 時針應該指向的是 9到10 之間 才對 所以，我們不但要得到現在的小時 ，還要得到 已經 ...

又來一個時鍾效果了，這個的實現不需要canvas，都是div、ul、li畫出的，好玩有真實。 哈哈~ 需要的js才能實現到走動這個效果，但js的內容不多，也不難。 主要是一個css里transform的使用的思路，transform里有很多變幻屬性，而普通的時鍾 在我心中就是個圓圓的東西 ...

今天我看到百度搜索的時間那個效果不錯，於是就產生了模仿一下的效果，不過為了節省時間，就隨便布了下局，廢話不多說，先看看效果吧，順便把百度的效果也拿過來。 對比樣子差了好多啊，但是基本功能都是實現了的，只要修改樣式就好了，我的美感特別差，所以就…… 我用的是css3和js實現的這個效果，漸變 ...

　　實現原理：通過js獲取到系統時間，然后分別算出年，月，日，時，分，秒，然后拼接年月日，時分秒，然后通過定時器setInterval每過一秒去獲取這些數據，這樣就可以實現時鍾的效果 效果圖 ...

　　設計思路： 　　數碼時鍾即通過圖片數字來顯示當前時間，需要顯示的圖片的URL根據時間變化而變化。 　　a、獲取當前時間Date()並將當前時間信息轉換為一個6位的字符串; 　　b、根據時間字符串每個位置對應的數字來更改圖片的src的值，從而實現更換顯示圖片; 　　構建HTML基礎 ...