JAVASCRIPT PROGRAM

JavaScriptで三角関数を使って秒針を表示しよう【初心者向け】

三角関数を使って現在時刻に合わせて秒針を表示しよう

前回は三角関数を使って円の中心を始点にして円周に沿って12本の線分を表示しました。
今回は線分をアナログ時計の秒針に見立てて動かしてみましょう。
現在時刻は、Dateオブジェクトを使います。
Dateオブジェクトを使って、現在時刻を取得するやり方はこちらの記事も参照してください。

秒針の角度を計算する

秒針を1秒ごと動かすので、360÷60で6度ずつ秒針の角度を変えていきます。
また、秒針の角度は0秒は90度、15秒は0度、30秒は-90度、45秒は-180度です。
これを求める式は、以下のようになります。

90度 - 6度 × 現在秒

上記の式で、0秒の時は90度、15秒は0度、30秒は-90度、45秒は-180度となります。

時刻に合わせて秒針を動かすプログラム

以下のプログラムは、現在時刻を取得してその時刻に合わせて秒針を表示します。

ファイルをダブルクリックするとプログラムが実行され、WEBブラウザ上に秒針が表示されます。

JavaScriptの使い方は、以下の「MDN Web Docs」を参照してください。

-JAVASCRIPT, PROGRAM
-