1. HTML 부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<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>
</html>
|
cs |
2. JS부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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();
clockTitle.innerHTML = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
function init() {
getTime();
setInterval(getTime, 1000);
}
init();
|
cs |
3. 결과
'JavaScript' 카테고리의 다른 글
| JS - toggle (0) | 2021.11.20 |
|---|---|
| JS - Event listener (0) | 2021.11.16 |
| JS - localStorage 다루기 와 preventDefault() (0) | 2021.04.04 |
| JS : JavaScript DOM 객체란? (0) | 2021.04.03 |
| JS - 자바스크립트의 데이터 타입 (0) | 2021.04.03 |