在body中用svg格式實現時鐘的繪製,在script標籤中定義更新事件的方法,並通過setinternal函式實現重複繪製。通過將時間的變化轉換為在鐘面上的旋轉角度,把相應的svg元素進行旋轉,實現時分秒中的轉動。
沒有將css樣式渲染寫在單獨的檔案中,而是定義在head標籤部分,style裡定義的樣式都會根據id作用於相應的元素上。
在新建的.js檔案中實現文字事件的顯示,addloadevent這個函式是參考的《dom程式設計藝術》這本書,處理多執行緒程式設計。showtime函式用於顯示時間。
function addloadevent(func) else
}}function showtime()
//將showtime()函式新增到處理事件佇列
addloadevent(showtime());
最終效果圖如下:
給小時鐘打光
在昨天的基礎上,加入了燈光和旋轉,當打入燈光後,時鐘立刻就有了立體感,並且按0可以切換燈光的關閉和開啟,左右鍵可以讓時鐘進行旋轉。明天加上探照燈的功能。using system using system.collections.generic using system.componentmodel ...
html css js系列之三 css的入門
參考 韓順平 輕鬆搞定網頁設計 1.在沒有css之前,先看乙個效果圖 背後的css1.html是這樣實現的 欄目一欄目二 欄目三欄目四 欄目五所有的樣式都寫在html頁面中,看起來比較囉嗦,不利索。2.為html新增css 效果圖 test.html 梁山英雄排行榜 宋江盧員外 吳用豹子頭 大刀關勝...
html css js三者的載入順序
頁面的載入順序時從上往下載入的 1 dom樹載入到llink標籤 css檔案的載入和dom樹的載入是可以同時進行的,也就是說,css在載入時dom樹還在繼續構建。這個過程中如果遇到css樣式或者img,會向伺服器傳送乙個請求,待資源返回後,將其新增到dom中的相應位置。2 dom樹載入到script...