JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果的具體代碼,供大家參考,具體內(nèi)容如下
這里用到的是Date時(shí)間類(lèi)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期類(lèi) 時(shí)間表</title> </head> <style> #box{ background:url(img/1.jpg) no-repeat; width: 600px; height: 600px; margin: 0 auto; position: relative; } #m,#s,#h{position: absolute;top: 0px;left:50%;margin-left: -15px;} /*這里利用絕對(duì)定位的margin負(fù)值法來(lái)讓時(shí)分秒的指針圖片居中,left:設(shè)置為50% margin-left為(圖片寬度的負(fù)數(shù)值)/2*/ #h{background:url(img/2.png) no-repeat;width: 30px;height: 600px;position: absolute} #m{background: url(img/3.png) no-repeat;width: 30px;height: 600px;} #s{background: url(img/4.png) no-repeat;width: 30px;height: 600px;} </style> <script type="text/javascript"> window.onload=function(){ function go(){//封裝函數(shù) var oh=document.getElementById("h"); var om=document.getElementById("m"); var os=document.getElementById("s"); var time=new Date();//獲取當(dāng)前時(shí)間 var s=time.getSeconds();//獲取秒數(shù) var min=time.getMinutes();//獲取分 var hour=time.getHours();//獲取小時(shí) os.style.transform="rotate("+s*6+"deg)";//運(yùn)用transform方法可以讓圖片轉(zhuǎn)動(dòng)到指定位置 鐘表上的每一個(gè)秒格的度數(shù)為360/60 om.style.transform="rotate("+min*6+"deg)";//用獲取到的時(shí)間乘以轉(zhuǎn)動(dòng)的度數(shù) 讓圖片變到指定位置 oh.style.transform="rotate("+hour*30+"deg)"; } go(); setInterval(go,20);//設(shè)置定時(shí)器每20毫秒執(zhí)行一次函數(shù),就可以實(shí)現(xiàn)動(dòng)態(tài)的鐘表 } </script> <body> <div id="box"><!--布局 box為鐘表的背景圖 可以在網(wǎng)上找一張 設(shè)置為相對(duì)定位--> <!--里面放三張圖片 分別是時(shí) 分 秒的指針圖 設(shè)置為絕對(duì)定位--> <div id="h"></div> <div id="m"></div> <div id="s"></div> </div> </body> </html>
效果圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)"上次操作未完成禁止新操作"邏輯特事特辦方案
這篇文章主要介紹了詳解JS如何實(shí)現(xiàn)"上次操作未完成禁止新操作"的邏輯及思路,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05TypeScript中type和interface的區(qū)別及注意事項(xiàng)
type的類(lèi)型別用可以用戶其他的類(lèi)型,比如聯(lián)合類(lèi)型、元祖類(lèi)型、基本類(lèi)型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-10-10JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04bootstrap Table實(shí)現(xiàn)合并相同行
這篇文章主要為大家詳細(xì)介紹了bootstrapTable實(shí)現(xiàn)合并相同行,fastadmin框架同樣使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07微信小程序swiper組件用法實(shí)例分析【附源碼下載】
這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實(shí)例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-12-12微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05vue3中Element Plus全局組件配置中文的兩種方案
element-plus組件文字語(yǔ)言默認(rèn)是英文,需要手動(dòng)更改一下中文包 ,本文主要介紹了vue3中Element Plus全局組件配置中文的兩種方案,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12