JS顯示當前時間

Date 是 JavaScript 原生的時間管理物件，通過它提供的大量方法和函數可以建立時間物件，獲取時間資訊，如年、月、日、時、分、秒等，也可以設定時間資訊。

本例設計一個當前時間顯示，先使用 new Date() 建立一個現在時間物件，然後使用 get 為字首時間讀取方法，分別獲取現在時的年、月、日、時、分、秒等資訊，最後通過定時器設定每秒執行一次，實現實時更新。

【操作步驟】

1) 設計時間顯示函數，在這個函數中先建立 Date 物件，獲取當前時間，然後分別獲取年份、月份、日份、時、分、秒等資訊，最後組裝成一個時間字串並返回。

var showtime = function () {
    var nowdate = new Date();
    var year = nowdate.getFullYear(),
        month = nowdate.getMonth() + 1,
        date = nowdate.getDate(),
        day = nowdate.getDay(),
        week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        h = nowdate.getHours(),
        m = nowdate.getMinutes(),
        s = nowdate.getSeconds(),
        h = checkTime(h),
        m = checkTime(m),
        s = checkTime(s);
    return year + "年" + month + "月" + date + "日" + week[day] + " " + h +":" + m + ":" + s;
}

2) 因為平時看到的時間格式一般是 00:00:01，而 getHours()、getMinutes()、getSeconds() 方法得到格式是 0 到 9，而不是 00 到 09 這樣的格式。所以在從 9 變成 10的過程中，從一位數變成兩位數，同樣再從 59秒變為 0 秒，或者 59 分變為 0 分，或者 23 時變為 0 時。例如：23:59:59 的下一秒應該為 00:00:00 ，實際為 0:0:0，這樣格式上就不統一，在視覺上也是數位突然增加，或突然減少，產生一種晃動的感覺。

下面定義一個輔助函數，把一位數位的時間改為兩位數位顯示。

var checkTime = function (i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

3) 在頁面中新增一個標籤，設定 id 的值。

<h1 id="showtime"></h1>

4) 為標籤系結定時器，在定時器中設定每秒鐘呼叫一次時間顯示函數。

var div = document.getElementById("showtime");
setInterval (function() {
    div.innerHTML = showtime();
}, 1000);  //反復執行函數

顯示結果如下：

---