728x90
반응형
HTML코드
<!DOCTYPE html>
<html lang="ko">
<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>전자시계</title>
<script src="2_Clock.js" defer></script>
</head>
<body>
<section>
<div id="click-container">
<div id="date-now"><i>현재날짜: </i><span></span></div>
<div id="time-now"><i>현재시간: </i><span></span></div>
</div>
<div id="timer-container">
<div>
<div id="timer"><span>00:00:00</span></div>
<button>시작/재시작</button>
<button>일시정지</button>
<button>초기화</button>
</div>
</div>
</section>
</body>
</html>300x250
반응형
js 코드
const dateNow = document.querySelector('#date-now > span'); //현재 날짜 부분
const timeNow = document.querySelector('#time-now > span'); //현재 시간 부분
const timer = document.querySelector('#timer > span'); //타이머 시간 부분
const btns = document.getElementsByTagName('button'); //모든 버튼
const startBtn = btns[0]; //시작버튼
const stopBtn = btns[1]; //중지버튼
const clearBtn = btns[2]; //초기화버튼
const timerStatus = { RUNNING: true, STOP: false }; //enum처럼 상태 객체를 만들기
let nowStatus = timerStatus.STOP; //타이머의 상태를 저장하는 변수 (기본값: STOP)
let timerID = ""; // 1초마다 타이머를 갱신시킴
//0.2초마다 날짜를 갱신
setInterval(date_setting, 200);
// Start 버튼을 눌렀다면
startBtn.onclick = () => {
//타이머 id를 받아오고, 1초마다 타이머가 시작하도록 함
nowStatus = timerStatus.RUNNING;
if(timerID === ""){
timerID = setInterval(timer_setting, 100);
}
}
stopBtn.onclick = () => {
if(timerID !== ""){
nowStatus = timerStatus.STOP;
}
}
clearBtn.onclick = () => {
//timerID가 존재하면(빈문자열이아니면) interval을 중지하고, 그게 아니면 timerID를 그대로(빈문자열로) 둔다
if(timerID !== ""){
clearInterval(timerID);
timerID = ""; //timerID를 초기화한다
timer.textContent = "00:00:00"; //문자열을 처음으로 돌린다
}
}
//현재 날짜 정보를 설정하는 함수
function date_setting(){
//날짜를 설정하기 위한 Date객체를 생성한다
const date = new Date();
//날짜 문자열을 생성
const dateString = `${date.getFullYear()}-${format_setting(date.getMonth() + 1)}-${format_setting(date.getDate())}`;
//현재 날짜 부분을 실제 날짜로 변경
dateNow.textContent = dateString;
//시간 문자열을 생성
const timeString = `${format_setting(date.getHours())}:${format_setting(date.getMinutes())}:${format_setting(date.getSeconds())}`;
timeNow.textContent = timeString;
}
//status: 현재 동작중인지, 정지상태인지 설정하는 상태 변수
function timer_setting(){
if(nowStatus === timerStatus.STOP){ return; }
let timerNowString = timer.textContent; //현재 진행된 타이머 시간
let times = timerNowString.split(':'); // ':'으로 문자열을 나눈다
let hour = +times[0]; //시
let min = +times[1]; //분
let sec = +times[2]; //초
sec++; //1초 증가시킴
if(sec >= 60){ //1초 증가했는데 60초가 되었다?
min++; //1분 증가시킴
sec = 0; //초를 0으로 돌림
}
if(min >= 60){ //1분 증가했는데 60분이 되었다?
hour++; //1시간 증가시킴
min = 0; //분을 0으로 돌림
}
if(hour >= 24){ //1시간 증가했는데 24시간이 되었다?
hour = 0; //hour를 0으로 돌림
clearInterval(timerID); //타이머를 중지시킴
}
//1초가 지난 현재 타이머 시간을 문자열로 생성
const timerSting = `${format_setting(hour)}:${format_setting(min)}:${format_setting(sec)}`;
//타이머 시간 표시 부분에 문자열을 설정
timer.textContent = timerSting;
}
//날짜나 시간 형식을 00:00:00 형태로 만들어주기 위한 포맷 형식
function format_setting(data){ //data -> 월, 일, 시, 분, 초 중에 하나가 들어옴 (string)
// data 를 문자열로 바꿧을 때 한 글자면 앞에 0을 붙여서 반환시킨다.
return data.toString().length < 2 ? '0' + data : data;
}
728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| promise (0) | 2023.01.03 |
|---|---|
| setTimeout / setInterval 사용 요약 (0) | 2023.01.03 |
| addEventListener 활용2 (0) | 2023.01.03 |
| addEventListener 활용1 (0) | 2023.01.03 |
| js 기초6 (0) | 2023.01.03 |