๋ฐ”๋‹๋ผJS๋กœ ๋งŒ๋“ค์–ด ๋ณด๋Š” ์‹œ๊ณ„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฒซ๋ฒˆ์งธ.
๋จผ์ €, HTML์— ์‹œ๊ณ„๋ฅผ ์ถœ๋ ฅํ•  ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋งŒ๋“ค๊ณ , JS๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•ด ๋ด…๋‹ˆ๋‹ค.

Use Method

Date()

Date ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ new์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์œ ์ผ.


year
์—ฐ๋„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. 0๋ถ€ํ„ฐ 99๋Š” 1900๋ถ€ํ„ฐ 1999๋กœ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

monthIndex
์›”์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. 0์€ 1์›”์„ ๋‚˜ํƒ€๋‚ด๊ณ  11์€ 12์›”์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

day
์ผ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. ๊ธฐ๋ณธ๊ฐ’์€ 1์ž…๋‹ˆ๋‹ค.

hours
์‹œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. ๊ธฐ๋ณธ๊ฐ’์€ 0(์ž์ •)์ž…๋‹ˆ๋‹ค.

minutes
๋ถ„์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. ๊ธฐ๋ณธ๊ฐ’์€ 0๋ถ„์ž…๋‹ˆ๋‹ค.

seconds
์ดˆ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. ๊ธฐ๋ณธ๊ฐ’์€ 0์ดˆ์ž…๋‹ˆ๋‹ค.

milliseconds
๋ฐ€๋ฆฌ์ดˆ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ •์ˆซ๊ฐ’. ๊ธฐ๋ณธ๊ฐ’์€ 0๋ฐ€๋ฆฌ์ดˆ์ž…๋‹ˆ๋‹ค.

 const date = new Date(),
        seconds = date.getSeconds(),
        minutes = date.getMinutes(),
        hours = date.getHours();

setInterval()

setInterval(getTime, 100);

์†Œ์Šค๋ณด๊ธฐ

  • JS
const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1");


function getTime(){
    const date = new Date(),
        seconds = date.getSeconds(),
        minutes = date.getMinutes(),
        hours = date.getHours();

    // innerText: ๊ฐ์ฒด ์•ˆ์— ํ…์ŠคํŠธ ๋„ฃ๊ธฐ 
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`;
}
function init(){
    getTime();
    setInterval(getTime, 1000);
}

init();

์•ž ๋‹จ๊ณ„์—์„œ ์ถœ๋ ฅ๋œ ์‹œ๊ณ„๋ฅผ ๋””ํ…Œ์ผํ•˜๊ฒŒ ์ˆ˜์ •ํ•ด๋ณด์ž.

How?

10๋ฏธ๋งŒ์˜ ์ˆซ์ž๋Š” ํ•œ์ž๋ฆฌ์ˆ˜์—ฌ์„œ ๋ณด๊ธฐ ์ข‹์ง€ ์•Š๋‹ค.
10๋ฏธ๋งŒ์ด๋ฉด 0๋ฌธ์ž์—ด์„ ๋ถ™์ด๊ณ  ์‹ถ๋‹ค.

clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} : ${minutes < 10 ? `0${minutes}` : minutes} : ${seconds < 10 ? `0${seconds}` : seconds}`;

์ฐธ, ์‰ฝ์ฃ ?

![image.png](์•ž ๋‹จ๊ณ„์—์„œ ์ถœ๋ ฅ๋œ ์‹œ๊ณ„๋ฅผ ๋””ํ…Œ์ผํ•˜๊ฒŒ ์ˆ˜์ •ํ•ด๋ณด์ž.

How?

10๋ฏธ๋งŒ์˜ ์ˆซ์ž๋Š” ํ•œ์ž๋ฆฌ์ˆ˜์—ฌ์„œ ๋ณด๊ธฐ ์ข‹์ง€ ์•Š๋‹ค.
10๋ฏธ๋งŒ์ด๋ฉด 0๋ฌธ์ž์—ด์„ ๋ถ™์ด๊ณ  ์‹ถ๋‹ค.

clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} : ${minutes < 10 ? `0${minutes}` : minutes} : ${seconds < 10 ? `0${seconds}` : seconds}`;

์ฐธ, ์‰ฝ์ฃ ?

image.png