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だけで作るアナログ時計ブログパーツなんてのもアリなんじゃないでしょうか？
河野 義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。
