JS簡簡簡易時鐘

2021-09-25 09:14:58 字數 1222 閱讀 9046

簡易時鐘：

1、搭建html/css部分

插入時鐘背景，使用子絕父相。把時針和分針、秒針的樣式放在時鐘的中心位置

2、js邏輯部分

（1）獲取時針、分針、秒針

var hour=document.


getelementbyid


("hour");


var min=document.


getelementbyid


("min");


var sec=document.


getelementbyid


("second"


);
（2）加上定時器，定時器間隔可以根據時鐘的間隔來確定。下面幾點的內容都在此函式中編寫

setinterval((


function()


),10)


;
（3）獲取當前時間，使用date物件。還考慮到分針不在整數時，會與整數有偏差，所以加上秒數、以及後面的分針。

由於時鐘上只有1-12.但是時間有1-24.所以在獲取當前小時值時%12，便於在進入下午一點後時鐘的迴圈

var mills=date.


getmilliseconds()


;/*當前的時間轉毫秒*/


var s=date.


getseconds()


+mills/


1000


;/*拿到秒*/


var m=date.


getminutes()


+s/60


;/*拿到現在的分針*/


var h=date.


gethours()


%12+m/60


;/*拿到現在的時*/
（4）設定對應時間點，時針分針秒針的指向。根據換算，可以得出旋轉的角度，可有以下**：

hour.style.transform=


'rotate('


+h*30


+'deg)'


;min.style.transform=


'rotate('


+m*6


+'deg)'


;sec.style.transform=


'rotate('


+s*6


+'deg)'


;

SVG簡易入門（極簡）

圖形的style設定 其他常用標籤 標籤相當於螢幕的視窗 也就是視口 所有的圖形都繪製在這個視口上，可以在svg標籤內通過width與height為它設定大小，例 width 200px height 200px 這裡的視口是寬高均為200px的正方形，寬高的長度也可以不使用px，而是使用相對大小 ...

js 實現簡易時鐘效果

大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，捲起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，檣櫓灰飛煙滅。故國神遊，多情應笑我，早生華髮。人生如夢，一尊還酹江月。來自奔跑的panda部落，panda每天與您一起進步 d...

js中bind call apply區別和簡單應用

以下是例子 var form1 document.getelementbyid form1 onclick form1.submit 1 name age undefined document.getelementbyid form1 onclick function document.getele...