溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript如何實現動態網頁時鐘”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript如何實現動態網頁時鐘”吧！
1先建立一個數組保存帶有0?9數字的10張圖片;
2.通過GETDATE（）獲得本地時間保存在變量數值指明MyTime中;
3. getHours（）返回的是24進制即0~23的整數，getMinutes（）方法返回一個處于0到59之間的整數，getSeconds（）方法返回一個處于0到59之間的整數;
4.通過的setTimeout（）每隔1秒調用一次顯示（）函數改變圖像對象的SRC屬性。
串對象的的charAt（ID）方法：返回指定位置處的字符，標識為要尋找的字符的位置的索引整數，0對應左邊第1個字符，1對應左邊第2個字符，如喂的的charAt（1 ）則是è;
代碼如下：
<html>
<head>
<title>時鐘</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
</style>
<script>
function show(){
var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");
var myTime=new Date();
var hours=myTime.getHours();
var minutes=myTime.getMinutes();
var seconds=myTime.getSeconds();
if(hours<=9){hours="0"+hours;}//補足兩位
if(minutes<=9){minutes="0"+minutes;}
if(seconds<=9){seconds="0"+seconds}
var theString=""+hours+minutes+seconds;//轉換為字符串
document.getElementById("img0").src=images[theString.charAt(0)];
document.getElementById("img1").src=images[theString.charAt(1)];
document.getElementById("img2").src=images[theString.charAt(2)];
document.getElementById("img3").src=images[theString.charAt(3)];
document.getElementById("img4").src=images[theString.charAt(4)];
document.getElementById("img5").src=images[theString.charAt(5)];
setTimeout("show()",1000);
}
</script>
</head>
<body onLoad="show()">
<img id="img0" /><img id="img1" />時<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" />
</body>
</html>
感謝各位的閱讀，以上就是“JavaScript如何實現動態網頁時鐘”的內容了，經過本文的學習后，相信大家對JavaScript如何實現動態網頁時鐘這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
