2012.01.25

【JS】javascriptでアナログ時計作ってみた。

今回はjsでアナログ時計を作ってみました。

巷ではjQueryで簡単に作れるチュートリアルがたくさんありましたが、ここは勉強のため自分で考えて作る事に。

日時はnew Dateで取得して、秒針、長針、短針と針の角度を求めました。

ここで、長針の角度を出すのに少し苦労しました(getHoursだと間の角度が取れないため、getMinutes()/2の角度をプラスしています)

次に、setIntervalで1秒ごとに処理を入れて秒針をリアルタイムで動かしています。

あとは上手いこと画像を作って、上手い事CSSで配置して完成です。ここは特にしんどかったところはないのですが、回転はwebkit-transformしか入れてないのでいくつかのブラウザでは見れないと思います。とりあえずの練習ようなので、良いかなーと。


記事のタグ一覧:

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事