💻 FullStack/Vue.js
Vue 시작일과 종료일로 진행률(%) 표시하기
_minwoo_
2023. 9. 19. 18:26
소개
new Date() 함수를 사용하면 현재 시간 정보를 얻거나, 날짜 형식으로 변경할 수 있다.
이를 이용해서 시작일과 종료일을 기준으로, 현재 진행률(%)를 구하는 js 파일을 작성해보았다 🐣
시/분/초 단위로 %를 구하고, 100%를 넘어가지않도록했다.
예시
Vue SFC Playground
play.vuejs.org
코드
DispalyProgress.js
const separator = "-"
// ★ 매개변수는 총 2개 (시작일과 종료일)이 필요
// ★ 매개변수는 문자열 타입
// ★ 연/월/일 구분은 separator 변수 값과 일치해주기 ex-> 2023/01/01(x) 2023-01-01(o)
function getPercentToPeriod(startDate, endDate) {
var start = Formatter_StringToDate(startDate);
var end = Formatter_StringToDate(endDate);
var today = new Date();
var total = end - start;
var perc = today - start;
var result = Math.round(perc / total * 100 )
return Number(result < 100 ? result : 100)
}
// 위 함수(getPercentToPeriod)에서 쓰기위해 작성
function Formatter_StringToDate( str ) {
// ( - 헤이픈 기준으로 자르기 ) 1번째 라인에 작성된 내용 ==>> const separator = "-"
var year = Number(str.split( separator )[0])
var month = Number(str.split( separator )[1])
var day = Number(str.split( separator )[2])
return new Date(year, month -1 , day)
}
export { getPercentToPeriod }
App.vue
<template>
<p> 현재 진행률 표시 (시/분/초 단위) </p>
<p>
<!-- 시작일 2023-09-19일부터, 2023-09-20일까지 진행률을 표시 -->
{{ getPercentToPeriod("2023-09-19", "2023-09-20") }} %
</p>
</template>
<script setup>
// DispalyProgress.js 파일에 있는 getPercentToPeriod() 함수 가져오기
import { getPercentToPeriod } from './DisplayProgress.js'
</script>