JavaScriptを使ったデジタル時計の作り方
今回は、JavaScriptを使って、デジタル時計を作ってみましょう。
JavaScript部分は、10数行の簡単なプログラムなので、プログラムをコピーして、フォントを変えたり色を変えたりと、色々と試してみてください。
大まかな処理の流れは、以下のようになります。
処理の流れ
- 1秒ごとに現在時刻を取得する
- 取得した現在時刻の表示をHH:MM:SS形式にする
- WEBブラウザに表示する
デジタル時計を表示するプログラムは、以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!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); var 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」を参照してください。