본문 바로가기

개발/vue

countdown timer 설정

반응형
<script setup>

const startTime = ref(new Date());
const diff = ref();
const elapsedTime = ref();

onMounted(() => {
	// countdown 5분 설정
	startTime.value = startTime.value.setMinutes(startTime.value.getMinutes() + 5);
    updateElapsedTime();
  	setInterval(updateElapsedTime, 1000);
});

function updateElapsedTime() {
  const currentTime = new Date();
  diff.value = startTime.value - currentTime;
  // set diff elapsed time in HH:MM:SS format

  const min = Math.floor(diff.value % (1000 * 60 * 60) / (1000 * 60));
  const sec = Math.floor(diff.value % (1000 * 60) / 1000);
  elapsedTime.value = `${min}:${sec}`;
}

</script>

 

 

<div> {{ elapsedTime }} </div>

 

반응형

'개발 > vue' 카테고리의 다른 글

Vue 3.0에서 타입스크립트 사용하기  (0) 2023.10.11
[Vue] Component 재사용  (0) 2023.01.17