クリエイターのためのWebテク講座 -アナログ時計を作ろう（2）

CSS3のrotateプロパティを使って、要素の角度を調整することができます。これを応用して、アナログ時計を作ってみましょう。

サンプルを見る

時計の針の中心点。

まずは下のサンプルを見てください。

サンプルを見る

サンプルでは、前回解説した、回転の中心点以外のプロパティは同じにしてあり、時計ということを意識し、棒の下側が揃うように設定してあります。

そして、上の方だけ、transform-originの値を、X：100%　Y：50%（つまりbottom center）に設定しています。

そうすると、時計のように、全ての針が同じ位置を中心に回転するのです。

時計の回転

次に、時計に合わせて回転するプログラムを組みましょう。

まずは時間を取得します。時間を取得するには、「Date()クラス」を使います。

使い方はこうです。

var date = new Date();

var HH = date.getHours();    //時間0～23で出力、夜の11時なら、23
var MM = date.getMinutes(); //分を0～59で出力
var SS = date.getSeconds(); //秒を0～59で出力

これらの値があれば、アナログ時計は作れるでしょう。

では実際に、上記で取得した時間から、時計の角度を割り出します。まぁ、秒針と分針は簡単ですね。一周が360度で、それぞれ最大値は60ですから、1秒・1分あたりの角度は、360÷60度となるので以下の式が成り立ちます。

//秒針の角度
var RM = (360 / 60 * MM);
//分針の角度
var RS = (360 / 60 * SS);

例えば15分なら、360÷60×15＝90度と、計算結果もしっくりくるでしょう。

さて、これで分と秒の計算式は出来ました。次は時間ですが、ここでちょっと問題が。

時間も最大24時間なので、360÷24×時間とすればいいかと思いますが、それだと、●●時30分とか●●時15分とか、中間の角度はどうしましょうか？

360÷24だけでは、一時間経つことでしか、時針が動きません。

そこで、360÷24×時間で算出した角度に、さらに分で割り出した角度を足してあげます。 360÷24で算出した角度は、そのまま1時間分の角度です。ここで算出した、1時間分の角度をさらに60で割れば、一時間における、一分の角度を算出できます。

//時針の角度
var RH = (360 / 24 * HH) + (360 / 24 / 60* MM);

あとはこれらをsetIntervalで実行し、各要素のtransformプロパティを更新し続ければ、無事時計を作ることができます。

$(".short").css("transform" , "translate(100px, 100px) rotate(" + RH + "deg)");
$(".long").css("transform" , "translate(103px,70px) rotate(" + RM + "deg)");
$(".second").css("transform" , "translate(105px,50px) rotate(" + RS + "deg)");

如何でしょうか？ JSだけで作るアナログ時計ブログパーツなんてのもアリなんじゃないでしょうか？