javascrip練習——顯示當前時間

效果：https://skyfood.github.io/clock/demo1.html

用到的知識點：

1、Date() 對象

• getFullYear() 從 Date 對象以四位數字返回年份。
• getMonth() 從 Date 對象返回月份 (0 ~ 11)。
• getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
• getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)。
• getHours() 返回 Date 對象的小時 (0 ~ 23)。
• getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
• getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。

2、setTimeout() 定時器

html代碼：

<div class="ht_date">
    <span id="date">2017年08月01日</span>
    <span id="week">星期二</span>
    <span id="time">15:00</span>
</div>

css代碼：

* { padding: 0; margin: 0; }
html { width: 100%; height: 100%; background: #242424; font-family: 'Arial'; }
body { width: 100%; height: 100%; display: -webkit-flex; display: flex; }
.ht_date { width: 500px; height: 100px; margin: auto; text-align: center; }
.ht_date:after { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
.ht_date span { font-size: 30px; color: #fff; display: inline-block; vertical-align: middle; }

JavaScript代碼：

window.onload = function () {
    startTime();
}

function startTime() {
    var today = new Date()

    var y  = today.getFullYear();
    var mo = today.getMonth() + 1;
    var d  = today.getDate();
    var h  = today.getHours();
    var mi = today.getMinutes();
    var s  = today.getSeconds();

    var weekday = new Array(7)
    weekday[0] = "星期日"
    weekday[1] = "星期一"
    weekday[2] = "星期二"
    weekday[3] = "星期三"
    weekday[4] = "星期四"
    weekday[5] = "星期五"
    weekday[6] = "星期六"

    mi = checkTime(mi);
    s = checkTime(s);
    document.getElementById('date').innerHTML = y + "年" + mo + "月" + d + "日";
    document.getElementById('week').innerHTML = weekday[today.getDay()];
    document.getElementById('time').innerHTML = h + ":" + mi + ":" + s;
    setTimeout('startTime()', 500)
}

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

（完）