俺のクソレシピ

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

記事一覧

JavaScriptで時計を作る(アナログ編)

さて、前回はJavaScriptでデジタル時計を作りましたが、今回は予告どおりアナログ時計を作ってみたいと思います。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

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

まず、時刻を表示するベースが必要ですね。ベースは、前回使ったベースを少し変えて使います。

あらら、前回とだいぶ変わっちゃいましたね。まず、今回は時計の針を画像で表示するので文字盤、短針、長針、秒針の4つの画像を表示するための、それぞれidを設定したimgタグを用意します。画像のサイズは300px×300pxにしています。4つの画像は重ねて表示する必要があるのでpositionと座表を指定します。画像を、親要素内に絶対配置するabsoluteで上から0px、左から0pxのところの配置しますが、親要素のpositionがstatic(デフォルト)だと親要素の位置を無視して絶対配置してしまうので(他の要素がある場合その要素とかぶってしまったりすることがあります。)、親要素のpositionを相対位置で配置するrelativeにします。ちなみに、ここで画像はhtmlファイルと同じディレクトリに配置しています。

※前回とdiv要素のidがclockからbaseに変わっていることに注意してください。

cssのpositionについて

position-スタイルシートリファレンス

時刻を取得しよう

ここは、前回の記事でも全く同じことをやっているので詳しい解説は載せません。

はい、前回と全く同じ(JavaScript)ですね。コンソールに取得した時刻を表示しています。
詳しくは、前回の記事を参照してください。

時刻を表示しよう

では、実際に取得した時刻をアナログ時計で表示してみましょう!

今回は前回と違って時刻をテキストで出力するのではなく、それぞれの針をidで指定してcssで画像を回転させて時刻を表しています。要素を回転させるには
transform:rotate(回転角度deg);
を指定して回転させることができます。2D(平面)回転でプラスで時計回り、マイナスで反時計回り回転します。このとき、短針の角度の計算に+が含まれているのでカッコでくくらないと数値が文字列に自動変換されて、計算されないで連結されてしまうので注意してください。ちなみに、degとは度のことです(例 90度=90deg)。

それぞれの針の角度の求め方の一覧。

説明 計算方法
短針 12時間で360度回転し、1時間(60分)で30度回転、1分で0.5度回転します。 時×30+分×0.5
長針 1時間(60分)で360度回転し、1分で6度回転します。 時×30+分×0.5
秒針 1分(60秒)で360度回転し、1秒で6度回転します。 時×30+分×0.5

JavaScriptでのidの取得方法について

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

JavaScriptでのcssの操作方法について

JavaScriptでCSSを操作する方法 | スターフィールド株式会社

cssでの画像の回転方法について

CSSでテキストや画像を回転させる方法

時刻を更新しよう

時刻はちゃんと表示できたでしょうか?できたら前回と同様、時刻が更新されないので更新しましょう。

やっていることは前回となにも変わらないので詳しい説明は前回の記事を参照してください。ちなみに、このコードでは針がスムーズに動きませんが、もしスムーズに動かしたかったら短針と同様に長針は秒、秒針はミリ秒の角度を考えて足して更新する時間をもっと細かくすればスムーズに動くはずです。応用としてやってみてもいいと思います。

デモ



ダウンロード

ここからプログラムと画像ファイルをダウンロードできます。

アナログ時計.zip - Google ドライブ

まとめ

今回は前回のデジタル時計に引き続きアナログ時計を作ってみましたが、どうでしたでしょうか。前回とは時刻の表示が全く違うので新たにいろいろなことを知ることができたのではないでしょうか?でも、全くと言っていいほどこの時計は機能がないですね。なので、次回のJavaScriptの記事ではデジタル時計とアナログ時計を組み合わせてアラーム機能をつけていきたいと思います。では、また今度!!