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