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 クロック効果デモンストレーション

• 
  
• 
  
• 
  
• 
  

/*
* 時計の目盛を描画します
* @param Wrap 目盛の親コンテナ
* @param total 目盛の総数
* @param translationX X 軸方向の目盛のオフセット
*/

functiondrawLines(wrap,total ,translateX){
var gap = 360/total;
var strHtml ='';
for (var i = 0; i strHtml += '

';
};
Wrap.html(strHtml) ;
}

/ *
* 時計番号を描画します
* @param ラップ 放射状メニュー原理に基づいてモデル化された数値の親コンテナー http://www.cnblogs.com/wuxiaobin/p/4644806.html
*回転は水平 x 軸から開始するため、 -90
*/
functiondrawNumbers(wrap){
var radius = Wrap.width() / 2;

var strHtml = '';

for(var i=1; i var myAngle = (i-3)/6 * Math.PI; //元の式角度 => ラジアン(i*30-90)*(Math.PI/180) => ; (i-3)/ 6 * Math.PI;

var myX = radius + radius*Math.cos(myAngle), // x=r+rcos(θ)

myY = radius + radius*Math.sin( myAngle); // y= r+rsin(θ)

strHtml += '

'

';

}
Wrap.html(strHtml);
}

/*
* 秒針、分針、時針が回転して時計が動きます
*/
function move(){
var domHour = $(".hour"),
domMin = $(".min"),
domSec = $(".sec");

setInterval(function(){

var now = new Date() ,
時間 = now.getHours(),
分 = now.getMinutes(),
秒 = now.getSeconds();

var secAngle = sec*6 - 90, // s*6-90

minAngle = min *6 + 秒*0.1 - 90, // m* 6+s*0.1-90
時間角度 = 時間*30 + 分*0.5 - 90

domSec.css( 'transform', 'rotate(' + secAngle + 'deg )');

domMin.css('transform', 'rotate(' + minAngle + 'deg)');
domHour.css('transform', 'rotate (' + 時間角度 + '度)');

document.title = 時間 + ':' + 分 + ':' + 秒;

},1000);

}

})