Tegi Log : 블록체인, 축구, 소레어, Sorare 컨텐츠망상공간
#JavaScript - new Date(), padStart() 시계 만들기 본문
반응형
💡 new Date(); : 현실시간을 받아올 수 있는 객체
padStart(a,b); : 2,3,4 이런 1의자리 숫자들을 02,03,04 이런식으로 10자리로 만들 수 있음.
매개변수a는 어느정도 길이로 할것인지, 매개변수 b는 어떤 문자열로 채울것인지 적는다.
<body>
<h2 id="clock"></h2>
<script>
// h2#clock 엘리먼트에 접근해서 변수에 담음.
const clock = document.querySelector('h2#clock');
//시간을 가져오는 함수를 정의
function getClock(){
//new Date();객체를 생성해서 변수에 담고.
const date = new Date();
//시간,분,초 나눠서 date.getHours,Minutes,Seconds()해준다.
//date에서 받은 각 숫자들을 문자열로 만들어야 되기 때문에 String()으로 감싸주고,
//지금은 초가 1,2,3 이런식으로 나오고 있기 때문에 padStart(2,'0');으로 십의자리로 만들어주고
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에 innterText한다.
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
//최초 1초를 기다려야 시간이 나오고 있기 때문에 처음에 getClock()을 한번 호출해준다.
getClock();
//그다음 setInterval함수로 1초마다 한번씩 getClock을 호출함.
setInterval(getClock,1000);
</script>
</body>반응형
'Development > JavaScript' 카테고리의 다른 글
| #JavaScript - Math.floor() Math.Round() Math.Ceil() 내림, 반올림, 올림으로 소숫점을 없애보자! (0) | 2022.07.03 |
|---|---|
| #JavaScript - setInterval() 로 계속 반복시켜보자! (0) | 2022.07.03 |
| #JavaScript - classList.add, remove, toggle 클래스로 토글을 만들어보자 (0) | 2022.07.01 |
| #JavaScript - Array 배열 생성과 사용법 (0) | 2022.07.01 |
| #JavaScript - querySelectorAll으로 for문 돌렸을때의 에러 ( querySelectorAll으로 배열만들기 (0) | 2022.06.30 |
'Development/JavaScript' Related Articles
more
Comments