JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果
更新時(shí)間：2017年07月15日 09:09:33 作者：梵海pp
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果的具體代碼，供大家參考，具體內(nèi)容如下
這里用到的是Date時(shí)間類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日期類 時(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ù)值法來讓時(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>
效果圖
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中比較操作符的用法及對(duì)比詳解(===、==、=== null、===““)
在JavaScript中,比較操作符用于確定兩個(gè)值之間的關(guān)系,===（嚴(yán)格等于）和==（抽象等于或?qū)捤傻扔冢┦亲畛Ｓ玫膬蓚€(gè)比較操作符,同時(shí),=== null和===""也體現(xiàn)了JavaScript在類型檢查和值比較方面的獨(dú)特之處,本文將詳細(xì)的給大家介紹這些比較操作符,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JavaScript中常見Polyfill的相關(guān)資料,Polyfill是一種代碼,用于在舊版瀏覽器中實(shí)現(xiàn)不支持的現(xiàn)代JavaScript功能,以確?？鐬g覽器兼容性和代碼統(tǒng)一性,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
復(fù)制本貼標(biāo)題和地址，發(fā)給QQ|Msn上的好友的代碼，方便利用用戶宣傳的js2008-07-07
這篇文章主要為大家詳細(xì)介紹了jsTree事件和交互以及插件plugins的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航欄的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實(shí)例詳解
這篇文章主要介紹了Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,需要的朋友可以參考下2017-04-04
javascript 多種搜索引擎集成的頁面實(shí)現(xiàn)代碼
這個(gè)頁面是為了方便自己同時(shí)使用多種搜索引擎（呵呵我用其作默認(rèn)主頁），在IE5/IE6/FireFox下均運(yùn)行正常，效果如下圖2010-01-01
這篇文章主要為大家詳細(xì)介紹了js基礎(chǔ)之事件捕獲與冒泡原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法詳解
最近學(xué)習(xí)中遇到這個(gè)問題，為了日后方便查詢，本人翻閱了一些資料總結(jié)了以下方法，僅限原生JS，如有不對(duì)的地方歡迎指出！只求大家看完覺得有學(xué)到點(diǎn)什么就OK了！下面這篇文章主要介紹了利用原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法,需要的朋友可以參考下。2017-02-02
判斷語句這個(gè)我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下2021-10-10