用css3 js寫了乙個鐘錶

2022-03-14 16:48:38 字數 2078 閱讀 2283

先給個成品圖,最終結果是個樣子的(動態的).

html**如下 ↓

<


div 


class


="dial"


>


div>


<


div 


class


="bigdiv bigdiv1"


id="secondhand"


>


<


div 


class


="secondhand"


>


div>


div>


<


div 


class


="bigdiv bigdiv2"


id="minutehand"


>


<


div 


class


="minutehand"


>


div>


div>


<


div 


class


="bigdiv bigdiv3"


id="hourhand"


>


<


div 


class


="center"


>


div>


<


div 


class


="hourhand"


>


div>


div>
變數名是隨便起的,不要介意; class=center的這個div是表中心那個小黑點.

時針是12*60*60s轉一圈, 分針是60*60s轉一圈, 秒針是60s轉一圈, 所以css**如下 ↓

.dial.bigdiv.bigdiv>div.bigdiv1.bigdiv1 .secondhand.bigdiv2.bigdiv2 .minutehand.bigdiv3.bigdiv3 .hourhand.bigdiv .center@keyframes movesto}
這一步做完後效果圖是這個樣子的:

然後用js計算當前時間,

var date = new


date();


var hours =date.gethours();


var minutes =date.getminutes();


var seconds = date.getseconds();
然後計算當前每個針的旋轉角度

var secondangle =seconds;


var minuteangle = minutes * 60 +seconds;


var hourangle = 43200 * ((hours%12)/12) + minuteangle;
現在的思路就是:每個針會按照自己定的時間轉一圈,初始角度也能知道,怎麼組成乙個顯示當前時間的動態鐘錶呢?

剛開始的想法是讓這3層div旋轉對應的角度,然後再開始,後來一想不行,因為它還是固定的時間旋轉一周,指標指向會有偏差,

現在需要的是頁面進來的第一圈旋轉固定角度,其餘的按照原來固定的時間旋轉一周就行了,

css3裡面有乙個animation-delay屬性,它表示的意思是動畫延遲,負數就表示提前開始(比如-5s就表示動畫從第5s的時間開始),

剛好可以用到,讓這幾個指標提前開始對應的角度.

js**如下↓

hourhand.style.csstext = "animation-delay: -"+ hourangle +"s";


minutehand.style.csstext = "animation-delay: -"+ minuteangle +"s";


secondhand.style.csstext = "animation-delay: -"+ secondangle +"s";
最後自己再加了個動態時間在鐘錶的上面展示

自己用JS寫了乙個簡單的時間控制項。。。

繪畫時間選擇器 var timeselect topattr top leftright center r bottom button 繪畫時間選擇器開始 timeselect.window function obj timeselect.obj obj var time new date var ...

用java寫了乙個漢諾塔

package com.brzhang 漢諾塔 開始盤子全部都放在第一根柱子上 目的 將第一根柱子上的盤子全部移動到第三根柱子上，規則是不能編號較大的盤子放在編號交小的盤子上面。public class hanota else 移動盤子，從from移動到to借助assite param from p...

用JS寫了乙個打字遊戲，反正我是通不了關

今天想寫個簡單的遊戲，打字遊戲好像都沒寫過，那麼就寫打字遊戲吧，gamepad包含了關卡的資訊，可以用來調整給個關卡字元下落的速度 getrandom函式會返回乙個字元物件，這個物件包含了字元下落的速度和當前被定位的x，y值，一整框 比較有借鑑的地方就是，只用了乙個定時器，而不是每乙個字元都用乙個定...