JS+HTMLで時計アニメーションを作る

今回はJS+HTMLで時計アニメーションを作るための注意事項を紹介します。

必要な知識ポイントは、CSS3アニメーション、DOM操作、タイマー、ドット座標の計算です（すでに先生に返している人も多いですよ〜）
次に、5つのステップで作っていきます

step1、HTMLの準備

まず、HTMLの構造、背景、文字盤、針（時針、分針、秒針）、数字を準備する必要があります。

りー

step2、CSSを準備する

ポインタの色とサイズを定義する必要があるのは、transform:rotate(-90deg); がポインタの回転に使用され、transform-origin:0 6px; が回転の中心点の設定に使用されることです。

りー

step3、時針の位置を計算します

JS は Date オブジェクトを通じて現在時刻を取得し、getHours は時間を取得し、getMinutes は分を取得し、getSeconds は秒を取得します。時針の 1 回転は 12 目盛で、各目盛の角度は 360°/12 で、分、秒はともに 60 目盛で、各目盛の角度は 360°/60 です。

りー

ステップ4、時計を回す

setInterval を通じてタイマーを設定し、毎秒更新します。初期化は一度実行する必要があることに注意してください。そうしないと、効果は 1 秒後まで表示されません。

りー

ステップ5、デジタル時間を描く

デジタル時間も円上にあります。半径を決定して、その半径上の座標を取得するだけです。各数字を左側に配置するだけです。円座標系の計算ルールを見てみましょう:

* 円の半径座標の計算:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
ただし、計算する座標は円弧上の点の座標であることに注意してください。配置する場合 各数値は要素の左上隅を基準に配置されるため、数値はオフセットされます。つまり、数値の中心点は円弧上にありません。解決策は、座標点 (x, y) をそれ自身の半分 (x-w/2, y-h/2) だけ平行移動することです。の数字は円弧上にあります。
りー

完全な JS コード:

<p id="clock">
 <p class="bg">
  <p class="point">
   <p id="hour"></p>
   <p id="minute"></p>
   <p id="second"></p>
   <p class="circle"></p>
  </p>
 </p>
< /p>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue2.0でグローバルスタイルを設定する手順の詳細な説明

jsスコープの使用方法の詳細

Emergence.jsプラグインの使用の詳細な説明

以上がJS+HTMLで時計アニメーションを作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。