<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1 class="js-time"></h1>
</div>
<script src="clock.js"></script>
</body>
</html>
js-time 클래스에 현재시각을 넣을 예정입니다
clock.js를 호출합니다.
// clock.js
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");
function getTime() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init() {
getTime();
setInterval(getTime, 1000);
}
init();
clockContainer에서 js-clock 클래스를 저장합니다.
clockTitle에서 js-clock 클래스에 있는 첫번째 h1을 저장합니다.
getTime()함수에서 new Date()를 통해 현재 날짜를 호출합니다.
각 시간, 분, 초로 나누어서 변수에 저장합니다.
clockTitle (js-clock클래스 안의 h1태그)에 Text(시:분:초)를 넣습니다.
이때 시, 분, 초는 10보다 작을때는 앞에 0을 붙여주어서 2자리를 유지시켜줍니다.
10보다 작은 경우를 처리하기 위해 삼항연산자를 사용합니다.
* 삼항 연산자 : 조건이 참일경우 '?' 뒤의 값이 실행되며, 거짓인 경우 ':' 뒤의 값이 실행됩니다.
(조건) ? (참인 경우 코드) : (거짓인 경우 코드)
ex) num % 2 === 0 ? x = "짝수" : x = "홀수";
init()함수에서 setInterval(getTime, 1000)로 getTime함수를 1초마다 호출해줍니다.
*setInterval(a, b) - a함수를 b초마다 실행
/* index.css */
body {
background-color: peru;
}
.js-time {
text-align: center;
color: white;
font-size: 60px;
}
'JavaScript' 카테고리의 다른 글
| [JavaScript] to do list 만들기 (localStorage) (2) | 2020.12.23 |
|---|---|
| [JavaScript] localStorage 사용 (0) | 2020.12.22 |
| [JavaScript] 이벤트 (0) | 2020.12.18 |
| [JavaScript] document 객체 (0) | 2020.12.18 |
| [JavaScript] window객체 (0) | 2020.12.18 |