CSSとJSでアナログ時計④長針と短針を作る


前回までのコーディングで、秒針が動くようになりました。

今回は長針と短針を作り、時計を完成させましょう。

・今回の完成品

css_clock15

長針のDIV

秒針と同じ要領で、長針、すなわち「」を表す針を作ります。

※秒針の下に表示させたかったので、位置が前後しています。

css_clock13

色はわかりやすくするために適当に付けました。

長針を動かす

前回、秒針を表示する位置を取得するのにgetTime()を使いました。
秒針を表示するだけなら、getSeconds()で取得してよかったハズです。

なぜgetTime()を使ったかというと、長針と短針を表示するのにも使いたかったからなんです。

アナログ時計の場合、長針と短針も1秒毎にちょっとずつ動いています。
例えば15分30秒なら、14分と15分の丁度真ん中当たりを指しているはずなのです。
長針は60秒×60分=3600秒で時計盤を一周します。
それと現在時の0分0秒から何秒経過しているかを考えれば、1秒毎の傾きがわかるワケですね。
さっそくJavaScriptをコーディングしてみましょう。

秒針と同様に59分から0分に変わる瞬間の対策も入れておきました。
詳細は前回の記事をご覧ください。

短針を作る

ここまで来たらあとは簡単。

同じ要領で、短針を一気に作っちゃいましょう。

css_clock14

ついに完成っ!……では無いんですね、実は。

ここまで作って実際の時刻と見比べてみるとわかりますが、時刻にズレが出てくると思います。
それも数時間単位で。

このズレを解決するカギはgetTime()にあります。

getTime()は1970年1月1日00:00:00からの経過時間であるという話は前回お話しましたが、実はこの時間は、日本標準時に基づいたものではないんです。
協定世界時という、世界基準の時刻が元になっているのです。

これを日本の時間に当てはめるには、日本の時差を考える必要があります。
日本標準時は、協定世界時から9時間進んでいると定められています。
すなわち、60秒×60分×9時間分の秒数をプラスしてあげれば、時差が補正できます。

さあ、今度こそ完成です!

感想

最初は、CSSの勉強がしたいと思っていたところ「時計だったら簡単そうじゃね?」と思って始めてみました。
が、実際やってみると意外と苦労が多く……
本当はCSSメインで組みたかったんですが、結局JavaScript多めになっちゃったのはちょっと悔しいかな。
今度はデジタル時計に挑戦します!

関連項目

コメントする