css3時計作成_html/css_WEB-ITnose

時計を作る前にいくつかのことを知っておく必要があります:

1. 円上の点座標の計算

2. 時計の時針、分針、秒針の変換

時計を見てみましょう。 , まず思い浮かぶのはアングル関連との関係です。次に、秒針、分針、時針の間には キャリー の関係があります。

例えば、h 時間 m 分 s 秒、この瞬間の時針、分針、秒針の角度: (-90、rotateZ 角度回転ルールのため、デフォルトは水平から開始します、反時計回りが+、時計回りが-)

ds = s*6-90;

dm = m*6+(s/60*6)-90;

dh = h*30+(m/60*30 )-90;

1. 1 秒 = 1 / 60 分、1 分 = 1 / 60 時間であることは誰もが知っています
2. 時計を観察すると、通常、時計の文字盤が 5 つの大きなグリッドに分割されていることがわかります。 12=60 の小さなグリッド、ダイヤル全体は 360°、つまり各小区分は 6° になります。言い換えれば、秒針と分針が動くたびに 1 つの小さな目盛り、6° を移動し、時針が動くとき、1 つの大きな目盛り、5*6°=30° を動きます。秒針と分針の動きの基本値は 6°、時針は 30°です
3. さらに、分針が動くとき、時針は静かに前進します。分針が動くと、6°で時針は実際に 1/60 * 30°動きます。したがって、時針の角度を計算するときは、分針の影響を無視しないでください。 (秒針も分針に同様の効果がありますが、ほとんど目に見えないので通常は無視します)

3. js で時刻を取得します

現在時刻を取得します, var date = new Date(), get現在の時刻 ミリ秒単位で表される時間。

getFull Year()、4 桁の年

getMonth()、0 ～ 11、それぞれ 1 月から 12 月を表す

getDate()、その月の日数

getDay()、0 ～ 6、それぞれ日曜日を表します -Saturday

getHours(),0-23

getMinutes(),0-59

getSecond(),0-59

コードは次のとおりです:

< ;html lang="zh -cn">

CSS クロック効果デモンストレーション

< ol class="number">

• 
  

最終効果: