怎么使用JavaScript實現網頁電子時鐘

這篇文章主要講解了“怎么使用JavaScript實現網頁電子時鐘”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用JavaScript實現網頁電子時鐘”吧！

如圖就是一個簡易的網頁電子時鐘，利用Javascript和 html和 css就可以制作

<div class="wrapper">
        <div class="time-box">
            <div class="hour"></div>
            <div class="sec"></div>
        </div>
 
        <div class="date">
            <div class="week"></div>
            <div class="date-box"></div>
        </div>
</div>

這是html的簡單結構，結構相對簡單，css樣式的話可以根據自己的喜好去設置，我這里就不把代碼發出來了

var hour = document.querySelector('.hour');
        var sec = document.querySelector('.sec');
        var week = document.querySelector('.week');
        var dateBox = document.querySelector('.date-box');
 
        //因為定時器第一次會延時一秒，所以第一次會有一秒延遲，提前調用一次
        time();
 
        //設置定時器，每秒一次
        setInterval(time, 1000)
 
        //獲取當地時間，封裝成函數
        function time() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var min = date.getMinutes();
            var s = date.getSeconds();
            var w = date.getDay();
 
            //補0
            m = m < 10 ? '0' + m : m;
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            min = min < 10 ? '0' + min : min;
            s = s < 10 ? '0' + s : s;
 
            hour.innerHTML = h + ':' + m;
            sec.innerHTML = s;
            week.innerHTML = '星期' + ['一', '二', '三', '四', '五', '六', '日'][w - 1];
            dateBox.innerHTML = y + '年' + m + '月' + d + '日';
 
        }

這是主要的Javascript代碼塊，主要是獲取當前日期，年月日和時間，然后再把獲取的時間日期通過innerHTML這個方法修改到html中，因為需要每秒顯示，所以還需要創建一個定時器，時間為一秒，因為需要每秒顯示不一樣的內容，所以需要把顯示的代碼以及獲取時間日期的部分也一起放到定時器當中。因為定時器第一次是有時間延遲的，所以需要在定時器之前調用一次這個封裝的函數。還有一個點就是星期的這一部分，因為獲取到的星期是數字，要把數字轉為大寫的星期，所以可以創建一個數組，用獲得的星期當索引去獲取數組中的星期。這就是幾個主要的點，其他相對比較容易想到。

感謝各位的閱讀，以上就是“怎么使用JavaScript實現網頁電子時鐘”的內容了，經過本文的學習后，相信大家對怎么使用JavaScript實現網頁電子時鐘這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！