5.0 ~ 5.3
์ด๋ฒ ๊ธ์ ๊ฑฐ์ ๋ค ์ผ์ ๋์ฏค์ ๊ฐ์๊ธฐ ์ปดํจํฐ๊ฐ ๋ฉ์ถ๋๋ฐ๋์... ๊ฐ๋ตํ๊ฒ ์จ์ผ์ง ใ ...ํ
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum App</title>
</head>
<body>
<h2 id="clock">00:00</h2>
<script src="js/clock.js"></script>
</body>
</html>
app.js
const clock = document.querySelector("h2#clock");
function getClock() {
const date = new Date();
// date.getHours()๋ฑ ์๊ฐ ๊ฐ์ ์ซ์ ๊ฐ์ด๋ค.
// padStart๋ string ๊ฐ์๋ง ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก, ๋ณํํด์ค์ผ ํ๋ค.
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
setInterval : ์ผ์ ๊ฐ๊ฒฉ์ผ๋ก ์คํ๋๋ ํจ์
setTimesout : ์ผ์ ์๊ฐ ํ ํ๋ฒ ์คํ๋๋ ํจ์
padStart(๋ฌธ์์ด ๊ธธ์ด, string ๊ฐ) : ์ฒซ๋ฒ์งธ ์ธ์์ ์๋ณด๋ค ๊ธธ์ด๊ฐ ์๋ค๋ฉด, ๋ฌธ์์ด์ ๋งจ ์์ ๋๋ฒ์งธ ์ธ์์ธ string ๊ฐ์ ์ฑ์ด๋ค.
console.log("1".padStart(2, "0")); // 01padEnd(๋ฌธ์์ด ๊ธธ์ด, string ๊ฐ) : ์ฒซ๋ฒ์งธ ์ธ์์ ์๋ณด๋ค ๊ธธ์ด๊ฐ ์๋ค๋ฉด, ๋ฌธ์์ด์ ๋งจ ๋ค์ ๋๋ฒ์งธ ์ธ์์ธ string ๊ฐ์ ์ฑ์ด๋ค.
console.log("1".padEnd(2, "0")); // 10
'javascript > ๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| DAY 12 (0) | 2023.01.09 |
|---|---|
| DAY 11 (0) | 2023.01.05 |
| DAY 8 (0) | 2023.01.03 |
| DAY 5 (0) | 2022.12.30 |
| DAY 4 (0) | 2022.12.30 |
