20'C 흐림
서울 강남구
D-day 남은 날짜 Progress-bar로 표현하기
Progress-bar가 설정하는 날짜에 1씩 증가한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
//D-Day 남은 날짜 자동으로 구하기
(function(){
var widthbar = $('.progress-bar').width();
var counter = function(){
var startDate = new Date("2020/01/01 18:06:00") //디데이 (시작하는 날짜를 설정한다.)
setInterval(function(){
var currentDate = new Date(); //현재 날짜 가져오기
var d = (currentDate.getTime() - startDate.getTime()) / 1000 / 60 / 60 / 24;
$('.progress-bar').css({
width:( Math.floor(d - 1) * (widthbar / 31) + 1) //여기서 31은 1일부터 ~ 31일까지 기준이다.
})
$('.progress-bar').text(Math.floor(d - 1) + 1)
}, 1000);
}
counter();
})();
디벨럽한 코드
// css
.progress-bar-inner {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 4px;
background: #D8D8D8;
}
.bar--devider {
width: 100%;
height: 4px;
background-image: repeating-linear-gradient(to right, transparent, transparent calc((100% / 30) - .12rem), white calc(100% / 30 - .12rem), white calc(100% / 30));
}
.progress-bar {
width: 0;
height: 100%;
background: #000;
position: relative;
}
// html
<div class="progress-bar-wrap">
<div class="progress-bar-inner">
<div class="bar--devider"></div>
<div class="progress-bar">
<div class="progress-now"><p>NOW</p></div>
</div>
</div>
<div class="progress-txt-inner clearfix">
<p class="progress-txt m:tit-xxxxxxs t:tit-xxxxxs">April,2019</p>
<p class="progress-txt m:tit-xxxxxxs t:tit-xxxxxs">April,2019</p>
</div>
</div>
// js
<script type="text/javascript">
(function(){
var widthbar = $('.progress-bar-inner').width();
var timeid;
var day = 30; //30일간(기간을 설정)
var n = 0;
var d;
var counter = function(){
var startdate = new Date("2020/01/07") //D-day (시작하는 날짜를 설정한다.)
var time = function() {
n++;
var currentDate = new Date(); //현재 날짜 가져오기
d = (currentDate.getTime() - startdate.getTime()) / 1000 / 60 / 60 / 24;
console.log(Math.floor(d - 1));
if((Math.floor(( d - 1)) >= day)){ // 시작하는 날짜가 30일간, 넘어가면 progress-bar 종료를 한다.
$('.progress-bar').css('width','100%')
return false; // 타이밍 제어(종료)하는 메서드
}
$('.progress-bar').animate({
width: (Math.floor((d - 1) * (widthbar / day) + 1)), //여기서 30은 progress-bar에 1일부터 ~ 30일까지 기준이다.
}).css( 'overflow','visible');
timeId = requestAnimationFrame(time); // 타이밍 제어(시작)하는 메서드
//console.log(timeId);
}
time();
if(n >= day){ // 시작하는 날짜가 30일간, 넘어가면 종료를 한다.
cancelAnimationFrame(timeId); // 타이밍 제어(종료)하는 메서드
}
}
counter();
})();
</script>