JAVASCRIPT PROGRAM

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

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

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

処理の流れ

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

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

digitalclock1-1

プログラム解説

10行目から20行目までのgetTime()関数がこのプログラムの本体で、現在時刻を取得してHH:MM:SS形式に変換しています。
12行目から14行目が少し分かりづらいかもしれませんが、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()メソッドの詳しい使い方は、こちらを参照してください。
23行目から25行目のstrClock()関数は、JavaScriptの組み込み関数のsetInterval()を使って1000ミリ秒(1秒)間隔でgetTime()関数を呼び出します。
そしてstrClock()関数を27行目にあるbodyタグのonload属性で呼び出します。
27行目はデジタル時計を表示する位置で、16行目のdocument.getElementById('pos1')で表示する位置を取得して、18行目のinnerHTMLで表示します。

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

-JAVASCRIPT, PROGRAM
-