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はコールバックを実行する.
Reference
この問題について(2. JS and CSS Clock), 我々は、より多くの情報をここで見つけました
https://velog.io/@yogjin/2.-JS-and-CSS-Clock
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
1.現在時刻の取得
const now = new Date();
const secnodDeg = (now.getSeconds() / 60) * 360 + 90;今の時間をもたらす.
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)`;要素のcssを指定できます.
上は
transform:
rotate(${hourDeg}deg)が追加されました.basicシンボル(`)を使用してjs定数値をstringに入れます.
3.一定時間ごとに繰り返し実行する関数
setInterval(rotateHands, 1000);setIntervalを使用してコールバックとms(時間)を指定します.各msはコールバックを実行する.
Reference
この問題について(2. JS and CSS Clock), 我々は、より多くの情報をここで見つけました https://velog.io/@yogjin/2.-JS-and-CSS-Clockテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol