프로젝트 설명
Date()를 사용하여 현재 시간을 출력하고 GO를 누를 경우 시간이 가고 STOP을 누를 경우 시간이 멈추게 해 보았다.
결과물
코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 모든 내용을 관리한다 -->
<div class="container">
<!-- 시간이 표시되는 영역 -->
<div class="clock">
<h1 id="time"></h1>
</div>
<button id="go">GO</button>
<button id="stop">STOP</button>
</div>
<script src="script.js"></script>
</body>
</html>style.css
html, body {
margin: 0; /* 웹에는 기본적으로 margin이 있어 margin을 초기화해주었다. */
}
.container {
text-align: center; /* container 안에 있는 요소들은 중간으로 배치해준다. */
}
.clock {
width: 200px; /* 가로 길이를 200px로 줄이지 않으면 박스가 화면을 꽉 채운다 */
margin: 30px auto;
border: 2px solid black;
border-radius: 10px;
}
button {
font-size: 20px;
font-weight: 500;
margin: 3px;
padding: 10px 20px;
border: 2px solid #48C9B0 ;
background-color:#A3E4D7;
border-radius: 10px;
}
button:hover { /* 버튼에 hover했을때 색깔을 바끼게 했다 */
background-color: #48C9B0;
}script.js
let handleId = 0; // 변수, 0으로 초기화해주었다. 시간이 계속 움직일때 동작에 대한 id를 저장하는것이다.
const h1 = document.getElementById('time');
const go = document.getElementById('go');
const stop = document.getElementById('stop');
// 현재 시간을 읽어오기
function getTime() {
const date = new Date(); // Date(): 자바스크립트 내장 객체를 가져와 new Date()를 생성하는 시점의 데이터를 가져온다.
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const time = `${hour}:${minutes}:${seconds}`; // 시,분,초의 문자열
h1.textContent = time; // time을 h1태그에 textContent로 대입한다.
}
getTime(); // 로드 된 시점의 시간이 나타난다.
// go 버튼을 누르면 시간이 간다.
go.addEventListener('click', function () { // go를 클릭했을때 function() 함수를 동작시킨다는 의미이다.
if (handleId == 0) {
// setInterval() 은 첫번째 인자로 전달된 함수를, 두번째 인자로 전달된 숫자만큼의 주기를 가지고 동작한다.
// 1000ms마다 getTime을 한번씩 쓰겠다는 의미이다.
// setInterval은 등록함과 동시에 주기적인 동작에대한 id를 반환하는데 그게 handleId에 저장한다.
handleId = setInterval(getTime, 1000); // setInterval: 브라우저 객체의 메서드
}
});
// stop 버튼을 누르면 시간이 멈춘다.
stop.addEventListener('click', function () {
console.log('stop');
clearInterval(handleId); //clearInterval에 id를 넣어주면 들어간 id의 interval이 작동을 그만한다.
handleId = 0; // handleId를 0으로 해줌으로써 초기화 시켜준다.
});
참고
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
'프론트엔드 > 웹 기능 구현' 카테고리의 다른 글
| [ 웹 기능 구현 ] offsetTop을 사용하여 scroll움직임 표현하기 (0) | 2022.09.30 |
|---|---|
| [ 웹 기능 구현] Hover me 효과 넣기 (0) | 2022.03.19 |
| [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 2 (0) | 2022.03.03 |
| [ 웹 기능 구현 ] Getform에서 연락받을 때 이메일 알림 설정 방법 (0) | 2022.03.02 |
| [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 (0) | 2022.02.28 |
댓글