<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                ### 數碼時鐘 - 效果思路 - 獲取系統時間 - `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> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看