CSSとJSを組み合わせて時計を作る
CSSはJSと結合して時計を作り、CSSとJSの結合の芸術表現をよく知っている.
レイアウトでは、大きなdivの中にulを1つ入れて時計盤を作るための60本の縦線を定義し、4つのdivをそれぞれ時計回りの分針秒針と中間円点に対応させます.
CSSスタイルでは主にpositionの位置決めとtransform-originの位置決めを活用して針の回転角度と初期化縦線の角度を決定するのは表の中点に基づいている.
JSでは主に属性を取得し、縦線スタイルを循環生産する.現在時刻をnew Date()で求める、回転角度をstyleで計算する.transformで針の回転角度を変更します.
レイアウトでは、大きなdivの中にulを1つ入れて時計盤を作るための60本の縦線を定義し、4つのdivをそれぞれ時計回りの分針秒針と中間円点に対応させます.
CSSスタイルでは主にpositionの位置決めとtransform-originの位置決めを活用して針の回転角度と初期化縦線の角度を決定するのは表の中点に基づいている.
JSでは主に属性を取得し、縦線スタイルを循環生産する.現在時刻をnew Date()で求める、回転角度をstyleで計算する.transformで針の回転角度を変更します.
var ul = document.querySelector("ul");
var hour = document.querySelector("#hour");
var minu = document.querySelector("#minu");
var sceo = document.querySelector("#sceo");
for (var i = 0; i < 60; i++) {
var li = document.createElement("li");
li.style.transform = 'rotate('+(i*6)+'deg)';
// 5 ，
if (i%5===0) {
li.style.height='20px';
}
ul.appendChild(li);
}
run();
setInterval(run,1000);
function run(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
console.log(s);
hour.style.transform = 'rotate('+(h*30+m/2)+'deg)';
minu.style.transform = 'rotate('+(m*6)+'deg)';
sceo.style.transform = 'rotate('+(s*6)+'deg)';
}