1.Intervals
- interval은 매번 일어나야하는 무언가를 말한다. 매 번 무슨 일이 일어나고 싶을 때 interval을 사용한다.
- setInterval은 두개의 인자를 받는데 첫 번째 인자는 네가 실행하고 하는 function이고
두 번째 인자는 매번 function을 ms 간격으로 지정할 것인지 시간을 적어준다.<script> const clock = document.querySelector("h2#clock"); function sayhello() { console.log("hello") } setInterval(fuc,5000) </script>2.Timeouts and Dates
- setInter이 아닌 일정 시간이 흐른 뒤에 딱 한번 일어나는 것을 말한다. 함수를 딱 한 번만 호출하되 일정 시간을 지정해서 일어날 때 Timeouts을 사용한다.
- js에가 가지고 있는 시간에 대한 date 객체를 사용하여 현재 시간을 표현할 수 있다.
- new date object는 현재 날짜, 시간, 분, 초에 대한 정보를 가지고 있고 그런 object를 setinterval을 이용해 매초 호출하여 만들어준다.
<script> const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } getClock() // getclock함수를 load되자마자 호출하여 1초의 지연없이 바로 시간을 보여주도록한다. setInterval(getClock, 1000); </script>
3.PadStart
- padStart, padEnd 함수는 네가 가지고 있는 string보다 길게 만들어야할 때 사용한다.
- "가지고 있는 string".padStart(원하는 자릿수,"채워넣을 숫자나 문자")의 형태로 사용한다.
4.Recep
0>시간을 표시해줄 id clock을 가진 h2태그를 만들어주고 00:00:00을 채워준다.
1>getClock()함수를 만들고 안에 date objcet를 호출해 현재 날짜 시간을 가져온다.
2>받은 시,분,초를 0초를 00초 방식으로 표현하기 위해서 num타입으로 받은 것을 string으로 바꿔준 뒤 padStart메소드를 사용해 앞부분에 0을 추가해준다.
3> 구한 시간을 clock의 innerText를 사용해 넣어준다.
4> 만들어낸 getClock함수를 setInterval을 사용하여 매 초마다 반복해서 보여주도록 한다.<body> <h2 id="clock">00:00:00 </h2> </body> <script src="../../js/project_js/project_momentum_clock.js"></script><script> function getClock() { const date = new Date(); 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() // getclock함수를 load되자마자 호출하여 1초의 지연없이 바로 시간을 보여주도록한다. setInterval(getClock, 1000); </script>
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.