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中，因為需要每秒顯示，所以還需要創建一個定時器，時間為一秒，因為需要每秒顯示不一樣的內容，所以需要把顯示的代碼以及獲取時間日期的部分也一起放到定時器當中。因為定時器第一次是有時間延遲的，所以需要在定時器之前調用一次這個封裝的函數。還有一個點就是星期的這一部分，因為獲取到的星期是數字，要把數字轉為大寫的星期，所以可以創建一個數組，用獲得的星期當索引去獲取數組中的星期。這就是幾個主要的點，其他相對比較容易想到。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。