JavaScript動態網頁-時鐘
阿新 • • 發佈：2018-10-31
設計思路：1.先建立一個數組儲存帶有0~9數字的10張圖片；
2.通過getDate()獲得本地時間儲存在變數myTime中；
3.getHours()返回的是24進位制即0~23的整數，getMinutes()方法返回一個處於 0 到 59 之間的整數，getSeconds()方法返回一個處於 0 到 59 之間的整數；
4.通過setTimeout()每隔1秒呼叫一次show()函式改變image物件的src屬性。
string物件的charAt(id)方法：返回指定位置處的字元，id為要尋找的字元的位置的索引整數，0對應左邊第1個字元，1對應左邊第2個字元，如hello的charAt(1)則是e;
程式碼如下：
<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>
網頁實現如下圖：
