-
[VanillaJS] 시계 구현하기JavaScript/VanillaJS 2022. 10. 18. 14:14728x90반응형
1. 매번 반복하기 setInterval()
부제: 매 초, 2초마다, 4초마다 등 원하는 간격으로 실행시키기
1) 매번 반복하기 - setInterval()
setInterval(함수, 시간간격) //시간은 ms 기준 (million seconds)index.html
<h2 id="clock">00:00</h2>h1태그 위에 h2 태그 추가하기.
id는 clock.
디폴트 세팅은 00시 00분.
clock.js
const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); // -> 5초마다 sayHello 함수가 실행됨2) 타이머 설정하기 - setTimeout()
setTimeout(sayHello, 5000); // -> 5초 후에 딱 한 번 sayHello 함수가 실행됨2. 시간 정보 가져오기 Date()
1) 시간 정보 가져오기 - Date()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
자바스크립트 내장함수 Date() 이용해서 시간 정보 가져오기
// 시 new Date().getHours() // -> 15 // 분 new Date().getMinutes() // -> 48 // 초 new Date()/getSeconds() // -> 122) 가져온 시간 정보 적용하기
시간 정보를 가져와서 h2 #clock 태그에 innerText 해주기
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } getClock(); // 시계 먼저 실행하기 -> 처음에 00:00으로 시작하지 않도록 setInterval(getClock, 1000);3) 한 자리 숫자는 두 자리 숫자로 보이게 만들기 _ padStart()
2시 7분 5초의 경우 2:7:5 로 보이는 문제가 있다.
이를 02:07:05 로 보이도록 수정한다.
이용할 function -> padStart()
"문자열".padStart(원하는 문자열 길이, 원하는 문자열 길이가 아닐 경우 추가할 문자);예시.
"1".padStart(2, "0"); // "01" "12".padStart(2, "0"); // "12" "hello".padStart(20, "x"); // "xxxxxxxxxxxxxxxhello"간단하지만 매우 유용한 기능
비슷한 예로 padEnd()가 있다.
padStart는 원하는 문자열 길이가 아니라면 지정한 문자를 문자열 '앞'(Start)에 추가해줬다면,
padEnd는 문자열 '끝'(End)에 추가해준다.
예시.
"1".padEnd(2, "0"); // "10"3. 완성본
index.html
<body> <form class="hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <button>Log In</button> </form> <h2 id="clock">00:00</h2> // 시계를 나타낼 h2 태그 <h1 class="hidden" id="greeting" ></h1> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> </body>clock.js
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minuits = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minuits}:${seconds}`; } getClock(); setInterval(getClock, 1000); // 실시간으로 보이게 하는 부분 (1초마다 실행)LIST'JavaScript > VanillaJS' 카테고리의 다른 글
[VanillaJS] 투두리스트 구현하기(下) (0) 2022.10.30 [VanillaJS] 투두리스트 구현하기(上) (0) 2022.10.23 [VanillaJS] 랜덤 모듈로 명언, 배경화면 구현하기 (0) 2022.10.22 [VanillaJS] 로그인창 구현하기 (0) 2022.10.14