Timer(타이머) 구현하기 | HTML, Javascript, jQuery

Timer(타이머) 구현하기

---

Environment

• HTML
• Javascript
• SCSS

Thirdparty

• jquery

---

구현

▪️ 퍼블리싱

타이머가 그려질 요소를 생성합니다.

<div id="timer"></div>

 

▪️ 기능

남은 시간

현재 시간을 기준으로 목표 시간까지 남은 시간을 초 단위로 계산합니다.

Date 객체의 valueOf() 메소드로 시간의 millisecond 값을 비교한 후 1000으로 나누어 second 단위로 변환합니다.

const goal = "2024-12-25"; // 목표 시간
// 목표 시간과 현재 시간의 차(초)
let remain = Math.floor((new Date(goal).valueOf() - new Date().valueOf()) / 1000);

 

초 > 일 시 분 초(ddhhmmss) 변환

구한 초 단위의 남은 시간을 일시분초 단위로 변환합니다.

👇👇이전글 참고 👇👇

2024.07.10 - [Utils] - 초 단위 시간을 일시분초(ddhhmmss) 단위로 변환하기 | Javascript

const timeObj = convertSecToHms(remain);

 

타이머 시작하기

1초마다 반복하는 메소드를 호출합니다.

setInterval(function() {
	// TODO - HTML 요소 업데이트

	remain -= 1; // 남은 시간 -1초
}, 1000);

 

---

완성❗

function startTimer() {
	// 목표시간
	const goal = "2024-12-25";
	 // 목표시간과 현재시간 차(초)
	let remain = Math.floor((new Date(goal).valueOf() - new Date().valueOf()) / 1000);
	
	const jqTarget = $(`#timer`);
	
	setInterval(function() {
		// 남은시간 변환
		const timeObj = convertSecToHms(remain);
		
		// HTML 요소 업데이트
		const el = `${timeObj.dayStr}일 ${timeObj.hourStr}시 ${timeObj.hourStr}분 ${timeObj.secStr}초 전`;
		jqTarget.html(el);
		
		remain -= 1;    // 남은시간 -1초
	}, 1000);
}