JavaScript デジタル表示の時計 ①

少しずつですが 実際にプログラムを書いてみています。
タイマー処理の練習の定番、デジタル表示の時計を作ってみました。とりあえず動けばいいだけのものですが、今後 少し改造してみます。

 DEMO

function clock() {
    var now = new Date();
    var h   = now.getHours();
    var m   = now.getMinutes();
    var s   = now.getSeconds();

    document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;
}
setInterval('clock()', 1000);

1行目　関数 clock を定義しています。実際の内容は 2行目からです。
2行目　Date オブジェクトを生成して、変数 now に代入しています。

3行目　変数 now つまり Date オブジェクトから オブジェクト生成時の 時分秒の「時」を取り出して 、変数 h に代入しています。

4行目　3行目とほぼ同じで、「分」を 変数 m に代入しています。
5行目　3行目とほぼ同じで、「秒」を 変数 s に代入しています。
6行目　見やすさのために 1行空けています。

7行目　document オブジェクトの getElementById() メソッドで、id 属性が clockArea の要素を取得して その innerHTML プロパティに、Date オブジェクトから取得した 「時」「分」「秒」を「：」で区切った文字列にして代入しています。この方法だと HTML に "clockArea" という id 属性を持たせた何かしらのタグ （ <p> , <span> , <div> 等でしょうか… ）を書いておく必要があります。その そのタグの innerHTML プロパティの内容を 丸ごと書き換えてしまうので、"clockArea" id を持たせたタグに 他にも子要素があると、それらの子要素は消えてしまうので注意が必要です。

9行目　タイマー処理の setInterval() で、1000ミリ秒 つまり 1秒毎に 関数 clock を呼び出して実行させています。時計なので、1秒毎に「時」「分」「秒」を取得し直して 表示する内容を書き換えているわけです。

文字の大きさや 余白等の見た目に関する部分は CSS で変えています。


最初に書いた 今後の改造は、先ず よりデジタル表示らしくするために「時」「分」「秒」が  1桁の時に 10の桁に 「0」を表示させるようにしたいですね。これは if 文を使って できそうです。それは次回に…。