JavaScript デジタル表示の時計 ②

前回 作った デジタル表示の時計を改造してみます。

今の状態だと、「時」「分」「秒」がそれぞれ 10 未満だと、数字が 1桁で表示されますが、普通のデジタル表示の時計では 10未満の数字を表示する時には、10の桁は "0"が表示されていると思います。今回は ここを改造します。

今 「時」「分」「秒」は それぞれ 変数 h, m, s に代入されています。これらの変数の値が10未満の時に 10の桁に 0 を表示させればいいのですから、ある条件を満たす場合と満たさない場合で 違う処理を行うということです。これは if 文でできそうです。

例えばこんな感じでどうでしょうか？　とりあえず「秒」についてだけ試してみます。

ex.1

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

    if (s < 10) {
        document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + "0" + s;
    }else {

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

    }

}  

setInterval('clock()',1000);

1行目　関数 clock を定義しています。その内容は、2行目以降です。
2行目　Date オブジェクトを生成して 変数 now に代入しています。
3行目　変数 now から「時」「分」「秒」の「時」を取り出して 変数 h に代入。
4行目　変数 now から「時」「分」「秒」の「分」を取り出して 変数 m に代入。
5行目　変数 now から「時」「分」「秒」の「秒」を取り出して 変数 s に代入。

7〜10行目　 if 文を使って 変数 s の値が 10未満の場合と 10以上の場合で分岐させて、10未満の場合は 時間表示の 変数 s の前に "0" を 追加しています。s が10以上の時には そのまま表示させています。

12行目　タイマー処理で 関数 clock を 1秒毎に繰り返して実行しています。


これを実行してみます。

ex.1の実行結果

「秒」だけでしたら これでも良さそうです。でも、この方法で「時」と「分」もやろうとすると、if 文の条件式が、

if (h < 10 && m < 10 && s <10) {

   処理;

}else if (h < 10 && m >= 10 && s >= 10) {

   処理;

}else if (h >= 10 && m < 10 && s >= 10) {

   処理;

}else if (h >= 10 && m>= 10 && s < 10) {

   処理;

}…

こういった条件式を あと 4通りくらい書かないといけなくなります。書いている途中で絶対まちがえてしまうと思うので、このやり方ではダメそうです。
全体としては ダメですけど、if 文 を使って、変数 h, m, s が1桁の時に 10 の桁に "0" を足す方法は良さそうですので、その方法は残して 別の書き方をしてみます。今度も 秒 だけで試してみます。

ex.2

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

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

ex.2 の実行結果

実行してみると、今度もうまく行っています。
処理の内容は、文字を赤くした所 以外は同じですので、赤字の所だけ内容を書きます。
変数 s の値が、10未満の時に、s の値に 文字列の "0"を + 記号で連結して、s に代入し直しています。このやり方だと、s の値が 文字列に変換されてしまうのですが、s は この後計算等に使う変数ではないので、問題は無いでしょう。書き方も大幅にスッキリできるので、この方法で 「時」と「分」もやってみます。

ex.3

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

    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }
    document.getElementById('clockArea').innerHTML = h + ":" + m + ":" + s;
    }

setInterval('clock()',1000);

ex.3 の実行結果

 DEMO

問題なく 表示されています。

ところで、実行結果のスクリーンショットを撮るのに 何時間も待てないので、変数に代入する値を少し引いて 朝の 9時頃にしました。蛇足ですがその方法も書いておきます。

var h = now.getHours() - 11;

Date オブジェクトから、「時」を取り出す時に、時間を戻す時には 引き算、進める時には足し算をすれば OK です。今は 夜の 8時過ぎですので、11 を引きました。
進める時に注意が必要なのは、 足した後の値が 23 を越えてしまっても、このやり方では 自動で 0 に戻ってはくれません。

以上で デジタル表示の時計の 1回目の改造は完成です。次は、今 24 時間制の表示になっているのを AM / PM の表示を付けて 12時間制の表示に改造してみようと思います。