728x90
자바스크립트 마감 카운트다운 타이머 만들기
🩸이슈 발생
오늘 기준으로 남은 시간 타이머 만들어보기 (마감 타이머)
See the Pen Untitled by Give J (@Give-J) on CodePen.
728x90
🩹이슈 해결
1. HTML
<div class="db_title">
<div style="width: 422px; margin-right: 32px;" id="modal">
<span>오늘 마감</span>
<p class="timer-wrap">
<span class="h12"></span>
<span> : </span>
<span class="m1"></span>
<span> : </span>
<span class="s1"></span>
<span> : </span>
<span class="ms1"></span>
</p>
</div>
</div>
2. CSS
.db_title {
display: flex;
padding-left: 35%;
padding-top: 21.5px;
}
span {
color: red;
font-size: 22px;
line-height: 100% ;
font-weight: 600;
position: relative;
}
.timer-wrap span {
letter-spacing: 6.72px;
font-size: 32px;
}
3. JavaScript
// 10 넘을경우 숫자 처리방식
function fGet2char(num) {
return num < 10 ? "0" + num : String(num);
}
// 타이머 데이터 넣기
function ddayTimer() {
let now = new Date();
let midnight = new Date();
midnight.setHours(24);
midnight.setMinutes(0);
midnight.setSeconds(0);
midnight.setMilliseconds(0);
let gap = Math.max(midnight.getTime() - now.getTime(), 0); // 음수 값 방지
let HH = fGet2char(Math.floor(gap / 3600000) % 24);
let MM = fGet2char(Math.floor((gap % 3600000) / 60000));
let SS = fGet2char(Math.floor((gap % 60000) / 1000));
let MS = fGet2char(Math.floor((gap % 1000) / 10));
document.querySelectorAll('.timer-wrap').forEach(item => {
item.querySelector('.h12').textContent = HH ;
item.querySelector('.m1').textContent = MM ;
item.querySelector('.s1').textContent = SS ;
});
document.querySelector('.ms1').textContent = MS;
setTimeout(ddayTimer, 0.0000000000000000000000000001);
}
// 현재 날짜 구하기
function getCurrentDate() {
let monthLists = document.querySelectorAll('.month');
let nextMonthLists = document.querySelectorAll('.next-month');
let dayLists = document.querySelectorAll('.day');
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let dateDay = new Date(year, month, 0);
let day = dateDay.getDate();
Array.prototype.forEach.call(monthLists, function(monthList){
monthList.textContent = month;
});
Array.prototype.forEach.call(nextMonthLists, function(nextMonthList){
if (month === 12) {
nextMonthList.textContent = 1;
} else {
nextMonthList.textContent = month + 1;
}
});
Array.prototype.forEach.call(dayLists, function(dayList){
dayList.textContent = day;
});
}
// 함수 호출
ddayTimer();
getCurrentDate();
💡유의사항
긴박함을 표현하기 위해 해놓은 밀리초는 실제 시간과 다를 수 있다.
300x250
'CODING > ⚡JavaScript' 카테고리의 다른 글
[JS] N명이 보고 있어요! 랜덤 함수 및 setTimeOut 사용하기 (0) | 2023.08.19 |
---|---|
[JS] 툴팁 만들기 (0) | 2023.08.13 |
[JS] TOP 버튼 만들기 (0) | 2023.08.10 |
[jQuery] Ajax 정복하기 (0) | 2023.08.09 |
[JS] 카테고리 만들기 (0) | 2023.08.08 |