俺のクソレシピ

おもにプログラミングについて俺の趣味についてテキトーに書いています。

記事一覧

JavaScriptで時計を作る(デジタル編)

今回の記事では、JavaScriptでデジタル時計を作ってみたいと思います。この記事ではHTMLとJavaScriptがある程度理解できる人を対象にしていますが、理解できなくても一応コピペして動かすこともできます。

f:id:myprogramming:20170626201822p:plain

時刻を表示するベースを作ろう

さあ、作っていきたいのですがまず時刻を表示する場所がなければどうにもなりませんね。実際に書いたコードはこんな感じです。

divタグ内に取得した時刻を表示します。あとでJavaScriptで指定するためにidをclockとしておきます。

時刻を取得しよう

JavaScriptで時刻を取得するにはnew演算子を使ってDateクラスをインスタンス化します。Dateクラスにはたくさんのメソッドがありますが今回は使うメソッドだけ紹介しておきます。

メソッド 説明
getFullYear() 西暦を取得する(現地時間)
getMonth() 月を取得する(現地時間) (0 ~ 11)
getDate() 日を取得する(現地時間) (1 ~ 31)
getHours() 時を取得する(現地時間) (0 ~ 23)
getMinutes() 分を取得する(現地時間) (0 ~ 59)
getSeconds() 秒を取得する(現地時間) (0 ~ 59)
getMilliseconds() ミリ秒を取得する(現地時間) (0 ~ 999)

詳しくは以下サイトで説明されています。

JavaScriptプログラミング講座【日付/時間について】

では、実際にJavaScriptで時刻を取得してみましょう。

取得した時刻をコンソールに表示しています。ここで注意が必要なのが、月です。月のデータは、0~11の数値で、出力されるので+1をしなければなりません。

時刻を表示しよう

では、取得した時刻を、body内に表示してみましょう。今回はidがclockのdiv要素内に表示します。コードは以下のようになります。

まず、document.getElementById()でidがclockのdiv要素を取得します。そして取得した時刻をinnerHTMLを使ってdiv要素内に取得した時刻を表示するHTMLを追加します。でも、これを実際に実行して見るとわかると思いますがこれでは左上に小さく表示されてしまいます。皆さん自由に見た目をカスタマイズしてみてください。

document.getElementById()について

id名で要素を特定してその属性を操作してみる | JavaScript入門編

innerHTMLについて

HTML要素の中身を変えるinnerHTML | JavaScript入門編

時刻を更新しよう

さて、時刻はちゃんと表示されましたが、実行したときの時刻になったまま、時刻が変わりません。時刻を更新してないからです。では、時刻を更新してみましょう。

今回はsetTimeout()で繰り返すので、時刻を取得して表示するプログラムを関数にします。そして、問題の繰り返す時間ですが、1秒毎に繰り返していくと処理速度によっては少しずつずれていって1秒飛ばしてしまうというようなことが起きてしまいます。なので、1000ミリ秒から現在時刻のミリ秒を引いて次の秒になるまでの時間待って時刻を更新することによってズレをなくしています。

setTimeout()について

JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン

デモ

 

ダウンロード

ここから、プログラムをダウンロードできます。

デジタル時計.zip - Google ドライブ

まとめ

今回は、JavaScript(とHTML)でデジタル時計を作ってみました。今回の内容が理解できれば、JavaScriptはだいぶできていると思います。また、今回ではJavaScriptの基本的な機能をほぼ使っているので、わからないと思っている人でも調べながら理解していけばJavaScriptがだいぶ得意になると思います。まずは、❝習うより慣れろ❞です。いろんなプログラムに触れながら覚えていくといいと思います。次回は、アナログ時計を作ってみたいと思います。わからないことがあったら是非コメントください。では、さようなら!