數碼時鐘 · JavaScript學習記錄

### 數碼時鐘 - 效果思路 - 獲取系統時間 - `new Date` 對象 - `getHours / getMinutes / getSeconds` - 顯示系統時間 - 字符串連接 - 空位補零 - 設置圖片路徑 - `str[i]`：取出字符串中的第 i 個值，不兼容 ie7 - `charAt(i)` 方法：取出字符串中的第 i 個值，兼容各種瀏覽器 - 設置路徑：`"url('img/0.png')"` - JavaScript 中的 String 方法 - `obj.charAt(index)` - 返回index位置的字符 - `obj.charCodeAt()` - 返回index位置的字符編碼 - `obj.indexOf("str")` - 順序搜索str，返回其位置，未找到返回-1 - `obj.lastIndexOf("str")` - 倒序搜索str，返回其位置，未找到返回-1 - `slice(start,end)`：同數組 - `substring(start,end)`：同上，區別在于參數為負數時自動轉換為0，并且較小的數為起始位 - `substr(start,len)`：同上，len 表示截取的長度 - 代碼： ```HTML <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>數碼時鐘</title> <style> body{ margin: 0; padding: 0; background-color: rgb(49, 49, 49); } li { list-style: none; float: left; width: 100px; height: 149px; } span { float: left; font-size: 100px; color: rgb(255, 255, 255); } </style> <script> window.onload = function () { // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 數碼時鐘 // 數字時鐘圖片設置函數 const oLi = gets('li'); function clock() { const date = new Date(); const str = addZero(date.getHours()) + addZero(date.getMinutes()) + addZero(date.getSeconds()); let i = 0; for (i = 0; i < oLi.length; i++) { oLi[i].style.backgroundImage = "url('img/"+ str.charAt(i) +".png')"; } } // 補零 function addZero(num) { if (num < 10) { num = '0' + num; } else { num = '' + num; } return num; } // 先執行一遍，就不會出現一秒的空白，定時器要 window.onload 完一秒后才執行 clock(); // 定時器每秒刷新一次 setInterval(clock, 1000); } </script> <body> <ul> <li></li> <li></li> <span>:</span> <li></li> <li></li> <span>:</span> <li></li> <li></li> </ul> </body> </html> ```