溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何實現時間表動態效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 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為（圖片寬度的負數值)/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(){//封裝函數
var oh=document.getElementById("h");
var om=document.getElementById("m");
var os=document.getElementById("s");
var time=new Date();//獲取當前時間
var s=time.getSeconds();//獲取秒數
var min=time.getMinutes();//獲取分
var hour=time.getHours();//獲取小時
os.style.transform="rotate("+s*6+"deg)";//運用transform方法可以讓圖片轉動到指定位置 鐘表上的每一個秒格的度數為360/60
om.style.transform="rotate("+min*6+"deg)";//用獲取到的時間乘以轉動的度數 讓圖片變到指定位置
oh.style.transform="rotate("+hour*30+"deg)";
}
go();
setInterval(go,20);//設置定時器每20毫秒執行一次函數，就可以實現動態的鐘表
}
</script>
<body>
<div id="box"><!--布局 box為鐘表的背景圖 可以在網上找一張 設置為相對定位-->
<!--里面放三張圖片 分別是時 分 秒的指針圖 設置為絕對定位-->
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
</body>
</html>效果圖
看完了這篇文章，相信你對“JavaScript如何實現時間表動態效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
