HTML、CSS、JavaScript を使用してアナログ時計を作成するにはどうすればよいですか?-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-08-29 11:01:02

転載

913 人が閲覧しました

如何使用 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()