JavaScriptでデジタル時計を作成する方法

カテゴリー:

今回は、JavaScriptを使ってウェブページに現在時刻を表示する方法を解説します。動的な時計表示は、リアルタイム情報を表示するサイトに便利です。今回の例では、「23:01:05」のように2桁24時間表示シンプルなデジタル時計を作成します。

コードの詳細解説

1. digs関数
function digs(num) {
    return ( num < 10 ) ? num = "0" + num : num = num;
}

この関数では、1桁の数字を2桁に変換します。
例えば、5の場合は「05」を返します。これにより、2桁表示の時計を作成できます。
1桁のままで表示したい場合は、digs関数を削除してください。

2. Watch関数
function Watch() {
    var date = new Date();
    var nowHour = digs( date.getHours() );
    var nowMin = digs( date.getMinutes() );
    var nowSec = digs( date.getSeconds() );
    var watch = nowHour + ":" + nowMin + ":" + nowSec;
    document.getElementById("Watch").innerHTML = watch;
}

この関数は、現在時刻を取得し、「時:分:秒」の形式にフォーマットします。
先ほど作成した、digsを使用することで2桁にフォーマットし、これらを組み合わせて時計の表示を作成します。
最後に、この文字列をIDが”Watch”のHTML要素の内容として設定します。

3. setInterval関数
setInterval('Watch()', 500);

setInterval関数は、指定した時間間隔(ミリ秒単位)で指定した関数を繰り返し実行します。この例では、Watch関数を500ミリ秒(0.5秒)ごとに実行し、時計を更新しています。これにより、ほぼリアルタイムで現在の時刻が表示されます。

コード全体

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>時計アプリ</title>
  </head>
  <body>
    <script>
        function digs(num) {
            return ( num < 10 )?num = "0" + num:num = num;
        }
        function Watch() {
            var date = new Date();
            var nowHour = digs( date.getHours() );
            var nowMin = digs( date.getMinutes() );
            var nowSec = digs( date.getSeconds() );
            var msg = nowHour + ":" + nowMin + ":" + nowSec;
            document.getElementById("Watch").innerHTML = msg;
        }
        setInterval('Watch()',500);
    </script>
    <div id="Watch">読み込み中</div>
  </body>
</html>
読み込み中

このコードをHTMLファイルに追加することで、シンプルで動的なデジタル時計をウェブページに表示できます。setInterval関数を使用することで、定期的に時刻を更新し、常に最新の時刻を表示することができます。ぜひ、試してみてください!

サンプルプログラムは、MITライセンスのもとで公開しています。
以下の利用規約を参照の上、使用してください。
ソースコードの利用に関する規約


Categories: