Contents
6. 시간 형태 바꾸기1. 파일 구조 변경
- js, css폴더 생성
- js 폴더 내부에 clock.js, greetings.js(app.js의 이름 변경)
- css 폴더 내부에 style.css 이동
- index.html에 바뀐 경로와 추가된 js 파일 적용하기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form class="login-form hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h1 class="hidden" id="greeting" ></h1> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> </body> </html>
h2 추가하기
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form class="login-form hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h2 id="clock"></h2> <h1 class="hidden" id="greeting" ></h1> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> </body> </html>
const clock = document.querySelector("h2#clock"); clock.innerText = "nice to meet you";
2. <h2>00:00 추가하기
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form class="login-form hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h2 id="clock">00:00</h2> <h1 class="hidden" id="greeting" ></h1> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> </body> </html>
const clock = document.querySelector("h2#clock");
2. interval
- 일정한 시간 간격으로 특정 작업을 반복 실행하기 위해 사용
setInterval(function, delay);
- 5초마다 sayHello 실행
- clock.js
const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); // 5초마다 sayHello 실행
3. timeout
- 일정 시간이 지난 후에 지정한 함수나 코드를 한 번 실행
setTimeout(function, delay);
- clock.js
const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setTimeout(sayHello, 5000); // 5초 후에 실행
4. Date
- 날짜와 시간을 다루기 위한 내장 객체
- 현재 날짜와 시간을 가져오거나 특정 날짜와 시간을 설정하고, 이를 다양한 형식으로 표현 가능
- 현재 날짜와 시간
const now = new Date(); console.log(now);
- 특정 날짜와 시간
const specificDate = new Date('2024-09-01T12:30:00'); console.log(specificDate);
- 날짜와 시간 가져오기
const now = new Date(); console.log(now.getFullYear()); // 연도 가져오기 console.log(now.getMonth()); // 월 가져오기 (0부터 11까지: 0 = 1월, 11 = 12월) console.log(now.getDate()); // 일 가져오기 console.log(now.getHours()); // 시각 가져오기 console.log(now.getMinutes()); // 분 가져오기 console.log(now.getSeconds()); // 초 가져오기
- 날짜와 시간 설정하기
const someDate = new Date(); someDate.setFullYear(2025); // 연도 설정 someDate.setMonth(0); // 월 설정 (0 = 1월) someDate.setDate(15); // 일 설정 someDate.setHours(10); // 시각 설정 someDate.setMinutes(30); // 분 설정 console.log(someDate);
- 타임스탬프
const timestamp = Date.now(); console.log(timestamp);
5. 시계 만들기
- interval 사용하기
- 1초 후에 처음으로 콘솔에 시간이 출력
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`) } setInterval(getClock, 1000); // 1초마다 실행
getClock()
을 즉시 호출- 페이지가 로드되자마자 시간을 출력하고, 이후 1초마다 계속해서 시간을 출력
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`) } getClock() setInterval(getClock, 1000); // 1초마다 실행
- date에서 가져온 값 적용하기
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form class="login-form hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h2 id="clock">00:00:00</h2> <h1 class="hidden" id="greeting" ></h1> <script src="js/greetings.js"></script> <script src="js/clock.js"></script> </body> </html>
const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } getClock() setInterval(getClock, 1000); // 1초마다 실행
6. 시간 형태 바꾸기
- String이 최소 2의 길이 가지기
- 00:00:00로 표시
"1".padStart(2,"0") // 2자리가 아니면 0 추가하기
const clock = document.querySelector("h2#clock"); 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() setInterval(getClock, 1000); // 1초마다 실행
Share article