JavaScriptでプログラミング（デジタル時計：午前午後表記）

先日、JavaScriptでデジタル時計を作りました。

この時計は２４時間表記だったのですが、今日はこれを改造して１２時間表記（午前/午後）にしてみました。

プログラム全体

　改造して出来上がったプログラムはこちらです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
	<title>JavaScript Watch</title>
    </head>
    <body>
        <form name="watch">
            <input type="text" id="contents" size=30>
        </form>
        <script>
            function digitalWatch() {
                var dt = new Date();

                var hr = dt.getHours();
                var mn = dt.getMinutes();
                var sc = dt.getSeconds();

		var ampm;

                if(hr >= 12) {
                    ampm = "午後";
                } else {
                    ampm = "午前";
                }

                hr = hr % 12;

                if(hr < 10) {
                    hr = "0"  + hr;
                }

                if(mn < 10) {
                    mn = "0" + mn;
                }

                if(sc < 10) {
                    sc = "0" + sc;
                }

                var WatchString = "今の時間　" + ampm + hr + "時" + mn + "分" + sc + "秒";

                document.getElementById("contents").value = WatchString;

                setTimeout(function() {
                    digitalWatch();
                },1000);
            }

            digitalWatch();
        </script>
    </body>
</html>

実際に動作させると次のようになります。

改造した部分

　今回のプログラムで新しく加えた部分は次の部分です。

		var ampm;

                if(hr >= 12) {
                    ampm = "午後";
                } else {
                    ampm = "午前";
                }

                hr = hr % 12;

「午前」「午後」の表記の為に「ampm」という変数を作りました。こちらの変数ampmには変数hrの値が12以上か12未満かによって「午後」「午前」を代入するようにしています。

この変数ampmは、出力文字列を定義している「var WatchString = "今の時間" + ampm + hr + "時" + mn + "分" + sc + "秒";」部分で時間の文字列と連結しています。

また「hr = hr % 12」は「hrを12で割ったときの余り」を出す式です。この計算式によって、hrに入る「0～23」の値を「0～11」の値になるように計算しています。

if文を使って「hr」の値が12以上だったら12を引く、という方法も考えたのですが、この余りを使う方法の方がシンプルに記述できたのでこの方法をとりました。

最後に

　毎日小さなJavaScriptプログラムを２～３書いて楽しんでいます。jQueryの学習と合わせてWebサイトに視覚効果を出すようなプログラムにも少しずつ挑戦していきたいと思っています。

博ログ。

地方の中小企業の事務員兼IT担当者やってます。日々の出来事やパソコン・スマートフォンなどIT・ガジェット全般について書いていきたいと思います。

JavaScriptでプログラミング（デジタル時計：午前午後表記）

プログラム全体

改造した部分

最後に