JSで日付と時刻表示

HTMLファイル

表示するHTMLにはspanタグで数字の入れ物を用意。それぞれidを設定しておきます。

index.html

<div id="time">
    <span id="year"></span>.<span id="month"></span>.<span id="day"></span> <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span>
</div>

JSファイル

各変数に日付と時刻を代入していきます。
その後、innerHTMLでHTMLに設定します。年以外は数字が1桁の時に先頭を0で埋めて2桁をキープ。
実行は最初のclock();でHTML読み込み時に表示。その後、setInterval(clock, 1000);で1秒毎に再帰的に表示します。

datetime.js

(function(){

    clock();

    function clock(){

        var date;
        var year;
        var month;
        var day;
        var hour;
        var minute;
        var second;

        date = new Date();

        year = document.getElementById('year');
        month = document.getElementById('month');
        day = document.getElementById('day');
        hour = document.getElementById('hour');
        minute = document.getElementById('minute');
        second = document.getElementById('second');

        year.innerHTML = date.getFullYear();
        month.innerHTML = (100 + date.getMonth()+1).toString().slice(-2);
        day.innerHTML = (100 + date.getDate()).toString().slice(-2);
        hour.innerHTML = (100 + date.getHours()).toString().slice(-2);
        minute.innerHTML = (100 + date.getMinutes()).toString().slice(-2);
        second.innerHTML = (100 + date.getSeconds()).toString().slice(-2);

    }

    setInterval(clock, 1000);


})();