JavaScriptでアナログ時計を作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptでアナログ時計を作成します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備が完了したので、JavaScriptを実装していきましょう。

今回の肝は、以下のCSSです。

transformでアニメーションを設定していて、針の動きをrotateが制御しています。

例えば、現在は全て「0」に設定されていますが、それぞれ、「10」、「20」、「30」に設定すると時計の針はこんな感じになります。

JavaScriptでこの値を制御して、時計が動いているように見せましょう。

要素を取得する

画面操作に必要な要素を取得します。

日付要素を定義

日付要素を定数で定義しましょう。

clickイベントを登録

「Dark mode」ボタンを押下すると背景色が反転するようにclickイベントを登録しましょう。

背景色の反転

次は、背景色を反転させる処理を実装します。

これでボタンをクリックした時に、背景色が反転するようになりました。ついでにボタンの名称も変わります。

日付の設定

次に日付の設定をおこないます。

JavaScriptだと「new Date()」にて日付オブジェクトが取得できるので、これを使って日時の設定を行っています。

また前述の通り、rotateの数値を変更すると針が動きます。この針を回す間隔を制御するためにscale変数を用意しました 。※JavaScriptは、変数に処理を格納できます

scaleは、指定した数値の幅を返却します。例えば時間の場合は0~11の間の数値が返ってきて欲しいので、この間の数値が返ってきます。

ここまで実装すると以下のように表示されます。

setIntervalで時計の針を動かす

setIntervalを使って、時計の針を動かしましょう。

setIntervalは、第一引数に指定した関数をミリ秒単位で実行してくれます。今回は時計なので、1000ミリ秒(1秒)間隔を指定しました。

これで完成です。

おわりに

アナログ時計かっけぇええ。工夫次第でなんでも実装できる感じがしますね^^

それには、CSSの知識が不可欠ですけど^^;

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す