對比樣子差了好多啊,但是基本功能都是實現了的,只要修改樣式就好了,我的美感特別差,所以就……
我用的是css3和js實現的這個效果,漸變是由css3的linear-gradient實現,當然js也有實現的辦法,不過js實現到底不如css3實現簡單,所以就不贅述了。有興趣的可以下來自己看看。
時鐘的旋轉是由css的transform:rotate實現,js進行控制。
廢話不多說,直接來**。首先就是html標籤
"這個**沒什麼,css布局**如下: 實現了css之後的效果是這樣的tab">
"tradion
">
"hours
"class="
tran
">
"minutes
"class="
tran
">
"seconds
"class="
tran
">
"dian
">
只有乙個時鐘的樣子,接下來就是js進行控制了
首先來時間顯示和鐘錶轉動的**
還差乙個日期的顯示**,這個就簡單了,完全跟時間顯示的一樣啊, 先說一下啊,時間顯示 getmonth()他認為這個月是從0開始的getdate(日)
getday(星期 0 1 2 3 4 5 6 )
這兩個函式也不要弄混了哦。
hours.style.transform="rotate("+(num*30-90)+"deg)";minutes.style.transform="rotate("+(num2*6-90)+"deg)";
seconds.style.transform="rotate("+(num3*6-90)+"deg)";
角度計算為什麼要減90deg是因為我的初始角度是90度,大家如果要是從0度開始就不能減了。
上面就是我所實現的簡單的時鐘效果,是不是特別簡單啊。大家自己可以試著改進,我這個實現還是太low,希望你們能夠做出更好的效果。
史上最簡單的windows程式
一直想把mfc與sdk聯絡起來,似乎難以直接查到相應的資料.前不久,一位發布了乙個帖子,題為 書上例子也有錯誤嗎?更使得我這個想法變得明確.對於sdk來說,不必這麼複雜.以下是所給出的程式 cpp demo2 2.cpp a message box define win32 lean and mea...
史上最簡單的MVP模式
本篇文章適合那些對mvp設計模式有一定了解但還不是很熟悉的同學。如果有寫得不對的地方,歡迎指正。那我們就來寫乙個簡單的demo吧,從例項上來學比較快。就舉乙個登入的例子。第一步 第一資源檔案 xmlns android xmlns tools android id id activity main ...
史上最簡單的SpringCloud教程
本文出自方志朋的部落格 錯過了這一篇,你可能再也學不會 spring cloud 了!spring boot做為下一代 web 框架,spring cloud 作為最新最火的微服務的翹楚,你還有什麼理由拒絕。趕快上船吧,老船長帶你飛。終章不是最後一篇,它是乙個彙總,未來還會寫很多篇。案例全部採用sp...