안녕하세요!
블랙프라이데이 기간에 자주 쓰이는 이벤트,프로모션 마감 타이머를 자바스크립트로 제작해보았습니다!
저는 시,분,초로 나타내주었습니다.
🔥실행 결과
1. 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>Document</title>
</head>
<body>
<div id="count-down">
<dl>
<dt class="hour"></dt>
</dl>
<dl>
<dt class="min"></dt>
</dl>
<dl>
<dt class="sec"></dt>
</dl>
</div>
</div>
<script src="src/app.js"></script>
</body>
</html>
2. 스크립트 파일
<script>
var hour = document.querySelector(".hour");
var min = document.querySelector(".min");
var sec = document.querySelector(".sec");
var dday=document.querySelector("#count-down dt");
var T=setInterval(diffDay, 1000);
var masTime = new Date;
masTime.setFullYear(2022,10,15); // 자바스크립트에서 월과 요일은 0부터 세므로 11월은 10이 됨.
masTime.setHours(17,0,0,0); // 17시를 의미함
var masTime = Math.round((masTime.getTime()-new Date().getTime())/1000);
function diffDay() {
masTime = masTime-1; //1초씩 감소
var d_sec2=masTime%3600; // 남은 초를 1시간 3600초 단위로 계산후 나머지 초
var d_hours=String((masTime-d_sec2)/3600).padStart(2,"0"); // 시간 계산
var d_sec3=String(d_sec2 % 60).padStart(2,"0"); // 남은 초를 60초 단위로 계산후 나머지 초
var d_mins=String((d_sec2 - d_sec3) / 60).padStart(2,"0"); // 분 계산
hour.innerText = `${d_hours}` + ":";
min.innerText = `${d_mins}` + ":";
sec.innerText = `${d_sec3}`;
if(masTime<=0){
clearInterval(T);
hour.innerText = `00` + ":";
min.innerText = `00` + ":";
sec.innerText = `00`;
} //디데이가 되면 00:00:00으로 표시
}
</script>저는 두 자리로 표현하기 위해 .padStart(2,"0");를 추가하였습니다.
3.CSS 파일
<style>
#count-down {
width: 1000px;
height: 380px;
line-height: 380px;
background-color: #c8c8c8;
color: #fff;
font-size: 72px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
</style>
*본 게시물은 학습을 위한 개인 기록용입니다.
'웹 > JavaScript' 카테고리의 다른 글
| [js] swiper slide (progressbar 프로그래스바 , 위치 css 변경) (0) | 2022.10.28 |
|---|