시간 자동으로 변경하기, 2:12:1으로 표출 되던 시간을 0을 붙여서 02:12:01으로 표출하기
* setInterval(함수, 시간)
- setInterval(실행할 함수, 함수를 실행하고 싶은 시간)
* 조건부 삼항연산자
- JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자
- 보통 if 명령문의 단축 형태로 쓰임
- condition ? exprIfTrue : exprIfFalse
- condition이 true이면, 연산자는 exprIfTrue의 값을 반환하며, 반대의 경우 exprIfFalse를 반환한다.
index.html - (1)에서 변한것 없음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<script src="clock.js"></script>
</body>
</html>
|
cs |
clock.js
1. setInterval을 이용해 1초마다 시간표출 함수(getTime) 실행
2. 시간 표현에 10보다 작을 시에 앞에 0을 붙여줌
: 기존 9 -> 변경 09
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime(){
const date = new Date(); //현재 시간을 가져온다
const minutes = date.getMinutes(); //분을 가져온다.
const hours = date.getHours(); //시간을 가져온다.
const seconds = date.getSeconds(); //초를 가져온다.
//HTML에 시간 표출
clockTitle.innerHTML = `${
hours < 10 ? `0${hours}` : hours //삼항연산자(작은 if문이라고 생각)
}:${
minutes < 10 ? `0${minutes}` : minutes //minutes 10보다 작으면 `0${minutes}` 실행, 그렇지 않으면 minutes 실행
}:${
seconds < 10 ? `0${seconds}` : seconds //seconds가 10보다 작으면 `0${seconds}` 실행, 그렇지 않으면 seconds 실행
}`;
}
//메인함수 역할
function init() {
getTime(); //시간 표출
//시간 새로고침
setInterval(getTime, 1000) // setInterval(실행할 함수, 함수를 실행하고 싶은 시간)
}
init();
|
cs |
결과물
'웹 개발' 카테고리의 다른 글
| 바닐라 JS로 크롬 시계 앱 만들기(4) (0) | 2021.05.13 |
|---|---|
| 바닐라 JS로 크롬 시계 앱 만들기(3) (0) | 2021.05.12 |
| 바닐라 JS로 크롬 시계 앱 만들기(1) (0) | 2021.05.12 |
바닐라 JS로 크롬 시계 앱 만들기(2)