史上最簡單的js css3實現時鐘效果

2022-04-22 06:30:26 字數 1303 閱讀 1698

對比樣子差了好多啊,但是基本功能都是實現了的,只要修改樣式就好了,我的美感特別差,所以就……

我用的是css3和js實現的這個效果,漸變是由css3的linear-gradient實現,當然js也有實現的辦法,不過js實現到底不如css3實現簡單,所以就不贅述了。有興趣的可以下來自己看看。

時鐘的旋轉是由css的transform:rotate實現,js進行控制。

廢話不多說,直接來**。首先就是html標籤

"

tab">

"tradion

">

"hours

"class="

tran

">

"minutes

"class="

tran

">

"seconds

"class="

tran

">

"dian

">

這個**沒什麼,css布局**如下:

實現了css之後的效果是這樣的

只有乙個時鐘的樣子,接下來就是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...