JAVASCRIPT PROGRAM

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

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

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

処理の流れ

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

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

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

digitalclock1-1

プログラム解説

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」を参照してください。

-JAVASCRIPT, PROGRAM
-