2. JS and CSS Clock


1.目標


現在の時間で動作する時計を作成しましょう。



2.整理


1.現在時刻の取得

const now = new Date();
const secnodDeg = (now.getSeconds() / 60) * 360 + 90;
new Date()
今の時間をもたらす.new Date().getSecond()は現在の秒をもたらします
それ以外に、時、分、週、年などをもたらすこともできます.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

2.jsで要素のスタイルを指定する

// 시침
        const hourHand = document.querySelector(".hour-hand");
        const hourDeg = (now.getHours() / 12) * 360 + 90;
        hourHand.style.transform = `rotate(${hourDeg}deg)`;
element.style
要素のcssを指定できます.
上は
transform:rotate(${hourDeg}deg)が追加されました.
basicシンボル(`)を使用してjs定数値をstringに入れます.

3.一定時間ごとに繰り返し実行する関数

setInterval(rotateHands, 1000);
setIntervalを使用してコールバックとms(時間)を指定します.
各msはコールバックを実行する.