今回は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) だけ平行移動することです。の数字は円弧上にあります。
りー
<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>
以上がJS+HTMLで時計アニメーションを作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。