JavaScriptを使って簡単なデジタル時計を作ろう【初心者向け】

2021年11月2日

JavaScriptを使ったデジタル時計の作り方

今回は、JavaScriptを使って、デジタル時計を作ってみましょう。
JavaScript部分は、10数行の簡単なプログラムなので、プログラムをコピーして、フォントを変えたり色を変えたりと、色々と試してみてください。
大まかな処理の流れは、以下のようになります。

処理の流れ

1秒ごとに現在時刻を取得する
取得した現在時刻の表示をHH:MM:SS形式にする
WEBブラウザに表示する

デジタル時計を表示するプログラムは、以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Digital Clock</title>
</head>
<body onload="strClock();">
  <div id="pos"></div>
  <script type="text/javascript">

    // 時刻取得関数
    function getTime() {
      var now = new Date();
      var hh = ('0' + now.getHours()).slice(-2);
      var mm = ('0' + now.getMinutes()).slice(-2);
      var ss = ('0' + now.getSeconds()).slice(-2);
      nowtime = hh + ":" + mm + ":" + ss;
      var id1 = document.getElementById('pos');
      id1.style.fontSize = "32pt";
      id1.style.color = "red";
      id1.innerHTML = nowtime;
    }

    // 開始関数
    function strClock() {
      setInterval("getTime();", 1000);
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Digital Clock</title>

</head>

// 時刻取得関数

function getTime() {

var now = new Date();

var hh = ('0' + now.getHours()).slice(-2);

var mm = ('0' + now.getMinutes()).slice(-2);

var ss = ('0' + now.getSeconds()).slice(-2);

nowtime = hh + ":" + mm + ":" + ss;

var id1 = document.getElementById('pos');

id1.style.fontSize = "32pt";

id1.style.color = "red";

id1.innerHTML = nowtime;

}

// 開始関数

function strClock() {

setInterval("getTime();", 1000);

}

</script>

</body>

</html>

ファイルをダブルクリックすると、プログラムが実行され、WEBブラウザ上にデジタル時計が表示されます。

プログラム解説

12行目から22行目までのgetTime()関数がこのプログラムの本体で、現在時刻を取得してHH:MM:SS形式に変換しています。
14行目から16行目が少し分かりづらいかもしれませんが、getHours()、getMinutes()、getSeconds()は値が一桁の場合があるため、二桁目を0パディング(0で埋める)する処理です。
slice(-2)は後ろから二桁の値を取得する処理で、例えば012の場合は12、001の場合は01を返します。
15時1分9秒の場合は、そのままだと15:1:9となってしまうので、取得した値の先頭に0を付加して、それぞれ015時01分09秒とし、015時の先頭の0をslice()メソッドで削除しています。
slice()メソッドの詳しい使い方は、こちらを参照してください。
25行目から27行目のstrClock()関数は、JavaScriptの組み込み関数のsetInterval()を使って、1000ミリ秒(1秒)間隔でgetTime()関数を呼び出します。
そしてstrClock()関数を7行目にあるbodyタグのonload属性で呼び出します。
8行目はデジタル時計を表示する位置で、18行目のdocument.getElementById('pos1')で表示する位置を取得して、21行目のinnerHTMLで表示します。

JavaScriptの詳しい使い方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ JavaScript

次回

JavaScriptでキャンバスを使ったデジタル時計を作ろう【初心者向け】