JavaScript デジタル表示の時計 ③

デジタル表示の時計 3

少し間が空いてしまいましたが、デジタル表示の時計をさらに改造してみました。今まで 24時までで 表示していたのを AM / PM の表示を付けて、12時までで表示するようにしてみます。前回までにできているプログラムを基にして、
AM / PM を表示する処理を追加するようにします。

Sample.1

function clock() {

    var now = new Date();

    var h   = now.getHours();

    var m   = now.getMinutes();

    var s   = now.getSeconds();

    if (h < 12) {
        var ampm = "AM ";
    }else {
        h -= 12;
        var ampm = 'PM';
    }

    if (h < 10) {

        h = "0" + h;

    }

    if (m < 10) {

        m = "0" + m;

    }

    if( s < 10) {

        s = "0" + s;

    }

    document.getElementById('clockArea').innerHTML = ampm + h + ":" + m + ":" + s;

}

setInterval('clock()',1000);

赤字の部分が 前回のコードに追加した部分です。

変数 h に 「時」「分」「秒」の 「時」が代入されていますから、h の値が 0~11 のときには、AM か PM を代入するための変数 ampm に AM を代入して、h の値が それ以外のとき（12~23）には PM を代入して、表示させる 値の先頭に + 演算子で連結させて表示する…。と これだけでいいのですが、少し気になる箇所もあります。

Sample.1の実行結果

Sample.1 を実行して 時刻が お昼の 12時を過ぎると 上の画像のようになります。別に間違ってはいませんが、PM 12:41:37 という方が お昼の感じがするのは自分だけでしょうか？もし そのように表示させたいのなら if 文 での条件分岐を 3つにして次のように処理を分ける必要があります。

1. h の値が 0~11　　ampm に AM を代入。
2. h の値が 12　　　ampm に PM を代入。
3. h の値が 13~23　 ampmに PM を代入して、h から 12を引く。

ためしに練習と思ってやってみます。

Sample.2

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

    if (h == 12) {
        var ampm = "PM ";
    }else if (h < 12) {
        var ampm = "AM ";
    }else {
        h -= 12;
        var ampm = 'PM';
    }

    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if( s < 10) {
        s = "0" + s;
    }

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

Sample.2 の実行結果

 DEMO

if 文で 2つに条件分岐させていたのを if ~ else if 文で 3つに条件分岐させて処理を分けています。処理の内容は 先に箇条書きにした通りです。

これで ようやく デジタル表示の時計は完成でいいと思います。そのうちに アナログ風の表示の時計にも挑戦してみたいですが、その前に CSS3 の練習などもしてみたいです。