20'C 흐림
서울 강남구
D-day 남은 날짜 Progress-bar로 표현하기
Progress-bar가 설정하는 날짜에 1씩 빠진다.
//html
<html>
<head>
<style>
.progress-bar-con {
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100vw;
height: 4px;
background: #555;
}
.progress-bar {
width: 100%;
height: 100%;
background: #00a8ff;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="progress-bar-con">
<div class="progress-bar"></div>
</div>
</body>
</html>
// js
//D-Day 남은 날짜 자동으로 구하기
(function(){
var widthbar = $('.progress-bar').width();
var counter = function(){
var startDate = new Date("2020/01/21 12:06:00") //디데이 (날짜 설정)
setInterval(function(){
var currentDate = new Date(); //현재 날짜 가져오기
var distance = startDate.getTime() - currentDate.getTime();
var d = Math.floor(distance / (1000 * 60 * 60 * 24)+1);
var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var s = Math.floor((distance % (1000 * 60)) / 1000);
if(s < 10){ s = '0'+s;}
$('.content').html(d+'day'+ h +'시'+ m +'분'+ s+'초 남았습니다.' )
$('.progress-bar').css({
width: d * (widthbar / 31) +'px' //여기서 31은 1일부터 ~ 31일까지 기준이다.
})
}, 1000);
}
counter();
})();