39 lines
993 B
Vue
39 lines
993 B
Vue
<template>
|
|
<div class="text-gray-800 font-mono text-lg bg-white/60 rounded-lg px-4 py-2 inline-block">
|
|
{{ days }}h : {{ hours }}j : {{ minutes }}m : {{ seconds }}d
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const props = defineProps({ targetDate: String })
|
|
|
|
const days = ref(0)
|
|
const hours = ref(0)
|
|
const minutes = ref(0)
|
|
const seconds = ref(0)
|
|
|
|
let timer
|
|
|
|
const update = () => {
|
|
const now = new Date()
|
|
const target = new Date(props.targetDate)
|
|
const diff = target - now
|
|
|
|
if (diff <= 0) return clearInterval(timer)
|
|
|
|
days.value = Math.floor(diff / (1000 * 60 * 60 * 24))
|
|
hours.value = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
|
minutes.value = Math.floor((diff / (1000 * 60)) % 60)
|
|
seconds.value = Math.floor((diff / 1000) % 60)
|
|
}
|
|
|
|
onMounted(() => {
|
|
update()
|
|
timer = setInterval(update, 1000)
|
|
})
|
|
|
|
onUnmounted(() => clearInterval(timer))
|
|
</script>
|
|
|