原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表
分享一個(gè)用原生JS實(shí)現(xiàn)的實(shí)時(shí)鐘表特效,效果如下(PS:實(shí)際指針是按360度走的,截圖時(shí)只截了一部分)
上面的效果一共需要4張圖片,分別是表盤、時(shí)針、分針、秒針,根據(jù)需要可以自己做圖片,實(shí)現(xiàn)的代碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS實(shí)現(xiàn)實(shí)時(shí)鐘表</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%; /* 時(shí)針圖片 */ 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");//時(shí) var m = document.getElementById("m");//分 var s = document.getElementById("s");//秒 var timer = null; // 根據(jù)當(dāng)前的時(shí)間實(shí)時(shí)的修改每個(gè)盒子的旋轉(zhuǎn)角度 timer = setInterval(function () { var date = new Date(); // 根據(jù)當(dāng)前date的每個(gè)時(shí)間部分,計(jì)算盒子運(yùn)動(dòng)的角度 // 每小時(shí) 360/12 30度/小時(shí) 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時(shí)鐘特效點(diǎn)擊查看:JavaScript時(shí)鐘特效專題
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js開發(fā)插件實(shí)現(xiàn)tab選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了js開發(fā)插件實(shí)現(xiàn)tab選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證
本篇文章主要介紹了通過sails和阿里大于實(shí)現(xiàn)短信驗(yàn)證的方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值實(shí)例代碼
由于項(xiàng)目需要常常會(huì)遇到為某一個(gè)對(duì)象動(dòng)態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關(guān)于js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11微信小程序?qū)崿F(xiàn)列表頁的點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表頁的點(diǎn)贊和取消點(diǎn)贊功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項(xiàng)卡效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-05-05淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個(gè)讓人神魂顛倒的--函數(shù)聲明。2016-01-01