HTML、CSS、JavaScript を使用してアナログ時計を作成するにはどうすればよいですか?

このチュートリアルでは、HTML と CSS を使用してアナログ時計を設計し、JavaScript を使用します。動作すると、現在時刻が時、分、秒の形式で表示されます。

#アプローチ

• Date オブジェクトを使用し、いくつかの計算を行うと、

  時間、分、秒が表示されます。

• システム時刻は、

  >getHours()、 などの関数を持つ JavaScript オブジェクト Date() から取得します。 getSecond() と getMinutes()。

• を取得した後、時間 、 分 、および 秒 形式を適用して、すべての 3 針の時間を変換します。分と秒の回転数。

アナログ時計は、連続的に動く 3 本の針によって時間を表示し、表示に合わせて 1 から 12 までの時間を示します。

HTML

index.html という名前の HTML ファイルを作成し、ボイラープレート コードを追加します。これは、以下に示す基本的な HTML 構文です。HTML コード内には、「sizeOfAnalog」という名前の div があります。これら 3 つの div 内には同じクラス名「sizeOfAnalog」があり、名前はhour_ Clock、 minutes_ Clock、 Seconds_ Clockです。

CSS

HTML コードに内部 CSS と内部 JavaScript を追加します。内部 CSS を適用するには

JavaScript

JavaScript 部分では、メインのロジック作業を行います。 JavaScript Date() オブジェクトとその関数 getHours()、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 を使用してアナログ時計を作成する完全なコードです。

えええええ

以上がHTML、CSS、JavaScript を使用してアナログ時計を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。