JAVASCRIPT PROGRAM

JavaScriptで三角関数を使ってアナログ時計(目盛り付)を作成しよう【初心者向け】

アナログ時計に目盛りを追加しよう

前回は長針、短針、秒針のみを表示するアナログ時計を作成しました。
今回は前回のアナログ時計の盤面に、目盛りを付けてみましょう。

目盛りの付け方

目盛りは1分単位(6度間隔)として、全部で60個表示します。
ただし、正時(1時、2時のように端数のない時刻)は、目盛りを太く長くして他の目盛りより目立つようにします。
正時は30度単位なので、角度が30で割り切れる時に目盛りを太く長くします。

アナログ時計に目盛りを表示するプログラム

アナログ時計に目盛りを表示するプログラムは、以下のようになります。
38行目のfor文は、0、6、12 ... 354を変数angleに代入していきます。
変数angleは三角関数で使う角度です。
40行目のif文は、30で割った時に余りが0かどうかを判定し、余りが0の時は目盛りを太く長くします。

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

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

-JAVASCRIPT, PROGRAM
-