Vue 시작일과 종료일로 진행률(%) 표시하기

 

 

 

 

소개

 

 

new Date() 함수를 사용하면 현재 시간 정보를 얻거나,  날짜 형식으로 변경할 수 있다.

이를 이용해서 시작일과 종료일을 기준으로, 현재 진행률(%)를 구하는 js 파일을 작성해보았다 🐣

시/분/초 단위로 %를 구하고, 100%를 넘어가지않도록했다.

 

 

 

 

 

 

 

---

 

 

 

 

 

 

예시

 

 

 

 

👀 체험 해보기

Vue SFC Playground

 

 

 

 

 

 

 

---

 

 

 

 

 

 

코드

 

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>