數字時鐘
阿新 • • 發佈：2019-01-02
<head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> 1. 首先設定一個DIV並且插入六張圖片表示時間： < div id = "box" > < img src = "img/0.png" id = "img1" / > < img src = "img/0.png" id = "img2" / > 時 < img src = "img/0.png" id = "img3" / > < img src = "img/0.png" id = "img4" / > 分 < img src = "img/0.png" id = "img5" / > < img src = "img/0.png" id = "img6" / > 秒 < /div> 2. 設制一個定時器： < script > setInterval(function(), 1000); 這行程式碼代表著， 給這個函式定義每秒執行一次 3. 定義定時器內的函式： function() { var now = new Date(); //獲取當下時間； var hour = now.getHours(); //獲取當下小時； var fen = now.getMinutes(); //獲取當下分鐘； var miao = now.getSeconds(); //獲取當下秒； 獲取時間目的： 由於這個函式是每秒都重新整理的， 所以當下時間一直變化， 可以利用這個控制獲取的照片的id， 使照片一直重新整理， 達到製作一個電子時鐘的目的。 var time = "" + miao; //將秒轉化為字串； var time2 = "" + fen; //將分鐘轉化為字串； var time3 = "" + hour; //將小時轉化為字串； 轉化字串目的： 後邊獲取照片時候使用的是字串， 所以需要把得到的時間轉化為字串。 if(miao < 10) { img5.src = "img/" + 0 + ".png"; img6.src = "img/" + time[0] + ".png"; } else { img5.src = "img/" + time[0] + ".png"; img6.src = "img/" + time[1] + ".png"; } 這串程式碼的意思是： 如果秒小於10， 代表秒第一位的照片設定為0， 第二位為獲取的秒的字串。（ 因為如果實時的秒為一位數時， 代表秒的第一位沒有字串表示） 除了10以外， 代表秒的第一位數字為獲取的秒的第一位字串， 第二位為獲取秒的第二位字串。（ 分鐘和小時同理） if(fen < 10) { img3.src = "img/" + 0 + ".png"; img4.src = "img/" + time2[0] + ".png"; } else { img3.src = "img/" + time2[0] + ".png"; img4.src = "img/" + time2[1] + ".png"; } if(hour < 10) { img1.src = "img/" + 0 + ".png"; img2.src = "img/" + time3[0] + ".png"; } else { img1.src = "img/" + time3[0] + ".png"; img2.src = "img/" + time3[1] + ".png"; } } </script> </body>