CSSとJSでアナログ時計③秒針を作る


いよいよ動きのある部分を作っていきます。

まずは、秒針を動かしてみましょう。

・今回の完成品

css_clock12

秒針のDIV

動かす対象となる針をdivで作ります。

css_clock11

考え方は目盛を出した時と一緒ですね。
topに10px指定することで、外枠から10pxだけ離すようにしています。

現在の秒数を計算する

JavaScriptで、今現在の時刻が何秒かを計算で求めてみましょう。
時刻を扱うので、Dateオブジェクトを生成します。
getTime()で1970年1月1日00:00:00からの経過ミリ秒数が取得できるので、その値を1000分の1すれば、秒数が得られます。
小数点以下の数値は使わないので、Math.floorで切り捨ててしまいましょう。

ここで取得したtimeは、1970年1月1日00:00:00からの経過秒数ですのですごい数字になってます。
必要なのは0秒~59秒のどれかですので、60で割った余りを計算します。
すると秒成分だけが抽出できます。

これで現在時刻の秒成分が抽出できたので、HTMLに反映させます。
秒針の回転軸を目盛と同じ時計の中心に設定し、適切な角度だけ「transform:rotate」で回転させます。
何度回転させれば良いか?
秒針は60秒で時計盤を一周しますので、1秒だと360度÷60度(6度)ずつ傾いていきます。
よって、(360度÷60度)×(秒数)で回転角度が求められます。

css_clock12

無事回転しました。
ただし、まだ最初に読み込まれた際に1回実行されるだけなので、秒針はそのまま動きません。
常に動くようにするために、JavaScriptの「setInterval」を使って常に更新させるようにしましょう。
setInterval」は、一定間隔で特定の処理を繰り返す命令です。

第一引数に繰り返し実行する関数、第二引数に繰り返し間隔をミリ秒単位で指定します。
上記のようにすればclockFunc()が1秒毎に実行されてくれるわけです。
なお、clockFuncという関数をわざわざ作成しなくても、以下のように無名関数で指定することもできます。

また、以下のような書き方でもイケます。

動きを滑らかにする方法と注意点

これでも時計っぽく見えますが、今のままだと秒針が一瞬で動いてしまってなんだかぎこちないです。
そこで、CSS3の「transition」を使ってなめらかに動くようにしてみましょう。

指定がmozとwebkitで微妙に異なるのが気になりますね。
はやく統一してほしいものです。

ともあれ、これでだいぶ滑らかに動きました。
ただし、トランジションを付ける場合、1点注意点があります。
それは、59秒→0秒に変化する瞬間です。

59秒の時点で、秒針はrotate(354deg)(354度)傾いているはずです。
しかし0秒になった瞬間、角度も0度に戻ります。
トランジションが付いていなければ問題無いのですが、トランジションが付いていると、秒針が354度から0度に戻ろうとするため、1秒ぐるんと逆方向に回転してしまいます。
これでは不恰好ですので、以下のような対策を打ちます。

①.ページを表示した瞬間は、素直に秒数×6度で表示
②.0秒の時点を過ぎたら、過ぎた回数だけ360を足した角度を指定

こうすることで、354度の次が(1週×360度で)360度になるので、スムーズに移動してくれます。
その後も366度、372度と進んでいき、次に0時になる瞬間は(2週×360度で)720度になります。
このままだと時間が経てば経つほど回転角度が増えていってしまいますが、読み込み直せば0度に戻りますし、実用上は問題無いでしょう。

以下に、修正したJavaScriptを掲載します。

ここまでの修正をすべて加えたものを以下に表示しておきます。

*

動きが付いてだいぶ時計らしくなって来ました。
次は短針と長針を作ります。
次でラストかなー?

関連項目

コメントする