ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、JavaScript を使用してアナログ時計を作成するにはどうすればよいですか?
このチュートリアルでは、HTML と CSS を使用してアナログ時計を設計し、JavaScript を使用します。動作すると、現在時刻が時、分、秒の形式で表示されます。
#アプローチ時間、分、秒が表示されます。
>getHours()、 などの関数を持つ JavaScript オブジェクト Date() から取得します。 getSecond() と getMinutes()。
を取得した後、時間 、 分 、および 秒 形式を適用して、すべての 3 針の時間を変換します。分と秒の回転数。
ステップ 1 - "background: url(lock.png) no-repeat;"コードを使用して時計を適用します画面上の背景画像。ここでの no-repeat は、画像が繰り返されないようにするためのものです。
ステップ 2 - ここで、Date() オブジェクトを使用して現在時刻を取得します。また、Date オブジェクトから現在の時、分、秒をそれぞれ取得することもできます。次に、HTML コードから時、分、秒を取得し、針の回転を 360 度に変換します。
ステップ 3 - ご存知のとおり、360 度以降は 1 回転とみなされます。したがって、これらの 360 度から合計 12 時間を取得したい場合は、(360/12) を使用して実行できます。これにより、1 時間で 30 度が得られます。
ステップ 4 - 1 分あたりの時間は 60 分間で合計 360 分必要なので、必要な (360/60) = 1 分あたり 6 度を使用して実行できます。
ステップ 5 - setInterval() を使用する JavaScript 部分では、1 秒が 1000 ミリ秒に等しいため、設定されたクロックを 1000 ミリ秒 (ミリ秒) ごとに実行できます。
したがって、new を使用して日付オブジェクト Date()
0 から 23 までの時間を取得しますgetHours()
0 から 59 までの分を取得しますgetMinutes()
0 から 59 までの秒を取得しますgetSeconds()
#ステップ 6- 3 つの値をすべて取得したら、それぞれの針を回転させ、アナログ時計が時間を表示し始めます。 例 (完全なプログラム)
以上がHTML、CSS、JavaScript を使用してアナログ時計を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。