현재 시간 표출하기
* document.querySelector
- html의 클래스 이름 및 태그를 갖고 오기 위해 사용한다.
- 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.
- 일치하는 요소가 없으면 null을 반환합니다.
- 이후에 이 엘리먼트를 이용하여 자손의 엘리먼트들을 다시 갖고 올 수 있습니다.
* innerHTML
- innerHTML은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
- querySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 할 수 있습니다.
* `(백틱)
- 백틱(`)을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.
- 문자열 사이에 변수만 따로 구분할 수 있게 해서 좀 더 직관적으로 볼 수 있다.
index.html
|
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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}:${minutes}:${seconds}`; //HTML에 시간 표출
console.log(date);
console.log(minutes);
console.log(hours);
}
//메인함수 역할
function init() {
getTime();
}
init();
|
cs |
결과물 - 시간변경은 새로고침 필요
'웹 개발' 카테고리의 다른 글
| 바닐라 JS로 크롬 시계 앱 만들기(4) (0) | 2021.05.13 |
|---|---|
| 바닐라 JS로 크롬 시계 앱 만들기(3) (0) | 2021.05.12 |
| 바닐라 JS로 크롬 시계 앱 만들기(2) (0) | 2021.05.12 |
바닐라 JS로 크롬 시계 앱 만들기(1)