原生JS實現(xiàn)實時鐘表
更新時間:2021年08月23日 14:07:55 作者:aiguangyuan
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)實時鐘表,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
分享一個用原生JS實現(xiàn)的實時鐘表特效,效果如下(PS:實際指針是按360度走的,截圖時只截了一部分)
上面的效果一共需要4張圖片,分別是表盤、時針、分針、秒針,根據(jù)需要可以自己做圖片,實現(xiàn)的代碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS實現(xiàn)實時鐘表</title> <style> .clock { width: 600px; height: 600px; margin: 100px auto; /* 表盤背景 */ background: url(images/0.jpg) no-repeat; position: relative; } .clock div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 時針圖片 */ background: url(images/1.png) no-repeat center center; } #m { /* 分針圖片 */ background-image: url(images/2.png); } #s { /* 秒針圖片 */ background-image: url(images/3.png); } </style> </head> <body> <div class="clock"> <div id="h"></div> <div id="m"></div> <div id="s"></div> </div> <script> // 獲取元素 var h = document.getElementById("h");//時 var m = document.getElementById("m");//分 var s = document.getElementById("s");//秒 var timer = null; // 根據(jù)當前的時間實時的修改每個盒子的旋轉(zhuǎn)角度 timer = setInterval(function () { var date = new Date(); // 根據(jù)當前date的每個時間部分,計算盒子運動的角度 // 每小時 360/12 30度/小時 h.style.transform = "rotate(" + date.getHours() * 30 + "deg)"; // 每分鐘 360/60 6度/分鐘 m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)"; // 每秒 360/60 6度/秒 s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)"; }, 1000); </script> </body> </html>
更多JavaScript時鐘特效點擊查看:JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
js給對象動態(tài)添加、設置、刪除屬性名與屬性值實例代碼
由于項目需要常常會遇到為某一個對象動態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關于js給對象動態(tài)添加、設置、刪除屬性名與屬性值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11javascript css紅色經(jīng)典選項卡效果實現(xiàn)代碼
這篇文章主要為大家詳細介紹了javascript css紅色經(jīng)典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下2016-05-05淺談javascript 函數(shù)表達式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達式.究竟他們用起來有什么區(qū)別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個讓人神魂顛倒的--函數(shù)聲明。2016-01-01