實現效果
實現效果
圖片素材
圖片素材
原理分析
- 用
setInterval（fn, 1000）來循環刷新圖片。 - 用
date對象的getHours()、getMinutes()、getSeconds()方法來獲取當前的時、分、秒，並且拼接成字符串。 - 通過字符串的處理來改變
<img>的src，從而達到改變圖片顯示的目的。
代碼
1 <body style="background:black; color: white; font-size:50px; padding: 50px 80px; "> 2 <img src="images/0.png" /> 3 <img src="images/0.png" /> 4 : 5 <img src="images/0.png" /> 6 <img src="images/0.png" /> 7 : 8 <img src="images/0.png" /> 9 <img src="images/0.png" /> 10 </body> 11 window.onload = function () { 12 //獲取img元素數組 13 aImg = document.getElementsByTagName('img'); 14 15 function tick(){ 16 var oDate = new Date(); 17 18 // 獲取當前的時分秒拼接成長度為6的字符串 19 var str = toDou(oDate.getHours()) + 20 toDou(oDate.getMinutes()) + 21 toDou(oDate.getSeconds()); 22 23 // 遍歷所有img，更新src 24 for(var i = 0; i < aImg.length; i++){ 25 // 第i張圖片的src對應str的第i為 26 aImg[i].src = "images/" + str.charAt(i) + ".png"; 27 } 28 } 29 30 // 設置定時器 31 setInterval(tick, 1000); 32 33 // 初始化 34 tick() 35 } 36 37 // 為了保證str的長度是6，用toDou()來為一位數補0 38 function toDou(num) { 39 return num < 10 ? "0" + num : "" + num; 40 }
分析總結
-
更新
src的整體思路是通過長度為6 的字符串str和長度為6的aImg數組對象一一對應，而獲取的時分秒有可能是一位數，所以用toDou(num)來補位。 -
toDou (num)中用的是三元運算符，簡化了代碼。1 //用if esle 2 function toDou(num){ 3 if(n<10){ 4 return "0"+num; 5 }else{ 6 return ""+num; 7 } 8 } 9 //用三元運算符 10 function toDou(num) { 11 return num < 10 ? "0" + num : "" + num; 12 }
-
由於setIteval(fn, 1000)的執行順序是先延遲，再執行函數，所以在最后單獨調用一下tick()，來防止刷新頁面后的第一秒顯示的是00：00：00。
-
還有一點，復習下
String對象的charAt()方法：charAt(index)方法可返回指定位置的字符（長度為1的字符串），如果index不在0和str.length之間將返回一個空字符串。