오늘은 시계를 만드는 중이다.
const clock = document.querySelector("h2#clock"); // 인덱스파일에서 clock을 찾고
function getClock(){
const date = new Date();
clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
//첫 줄 정의한 clock에 시간 분 초 를 불러주는 기능을 쓴다.
getClock();
setInterval(getClock,1000);
-1을 01로 만들어주는 것
"1".PadStart(2,"0") // 1이란 숫자의 길이를 2만큼 늘리는데 0으로 채운다..,대충 이런뜻 하지만 기능 자체는 (내가 이해하기론) 스트링의 길이를 늘려주는 것이므로 함수를 스트링형식으로 바꿔준다.
↙↙↙↙
시계최종본
const clock = document.querySelector("h2#clock");
function getClock(){
const date = new Date();
const hours = String(date.getHours()).padStart(2,"0"); // 이런식으로String() 감싸주면 끝.(본래형태에서)
const minutes = String(date.getMinutes()).padStart(2,"0");
const secondes = String(date.getSeconds()).padStart(2,"0");
clock.innerText = `${hours}:${minutes}:${secondes}`;
}
getClock();
setInterval(getClock,1000); //숫자는 1000이지만 1초마다 계속 보여주는것 = 실시간으로 보게 해주는 기능
- 이 기능이 없다면 한번만 일어나고 만다.
'하찮은 개발일지' 카테고리의 다른 글
css 배경이미지 설정 (0) | 2022.09.25 |
---|---|
22.07.18 날씨 api 사용 (0) | 2022.07.18 |
2022.07.18 버튼을 눌러 삭제하는 기능 (0) | 2022.07.18 |
22.07.15 백그라운드 외.. (0) | 2022.07.15 |
2022.07.11 String (0) | 2022.07.11 |