您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript如何實現(xiàn)時間表動態(tài)效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1.可以使網(wǎng)頁具有交互性,例如響應用戶點擊,給用戶提供更好的體驗。 2.可以處理表單,檢驗用戶的輸入,并提供及時反饋節(jié)省用戶時間。 3.可以根據(jù)用戶的操作,動態(tài)的創(chuàng)建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。
這里用到的是Date時間類
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期類 時間表</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;} /*這里利用絕對定位的margin負值法來讓時分秒的指針圖片居中,left:設置為50% margin-left為(圖片寬度的負數(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();//獲取當前時間 var s=time.getSeconds();//獲取秒數(shù) var min=time.getMinutes();//獲取分 var hour=time.getHours();//獲取小時 os.style.transform="rotate("+s*6+"deg)";//運用transform方法可以讓圖片轉動到指定位置 鐘表上的每一個秒格的度數(shù)為360/60 om.style.transform="rotate("+min*6+"deg)";//用獲取到的時間乘以轉動的度數(shù) 讓圖片變到指定位置 oh.style.transform="rotate("+hour*30+"deg)"; } go(); setInterval(go,20);//設置定時器每20毫秒執(zhí)行一次函數(shù),就可以實現(xiàn)動態(tài)的鐘表 } </script> <body> <div id="box"><!--布局 box為鐘表的背景圖 可以在網(wǎng)上找一張 設置為相對定位--> <!--里面放三張圖片 分別是時 分 秒的指針圖 設置為絕對定位--> <div id="h"></div> <div id="m"></div> <div id="s"></div> </div> </body> </html>
效果圖
看完了這篇文章,相信你對“JavaScript如何實現(xiàn)時間表動態(tài)效果”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。