30 lines
1.5 KiB
Plaintext
30 lines
1.5 KiB
Plaintext
<template>
|
|
<div class="aa-countdown">
|
|
<span v-if="d > 0" class="aa-countdown-seg"><span class="aa-countdown-num">{{ pad(d) }}</span><span class="aa-countdown-label">天</span></span>
|
|
<span class="aa-countdown-seg"><span class="aa-countdown-num">{{ pad(h) }}</span><span class="aa-countdown-label">时</span></span>
|
|
<span class="aa-countdown-sep">:</span>
|
|
<span class="aa-countdown-seg"><span class="aa-countdown-num">{{ pad(m) }}</span><span class="aa-countdown-label">分</span></span>
|
|
<span class="aa-countdown-sep">:</span>
|
|
<span class="aa-countdown-seg"><span class="aa-countdown-num">{{ pad(s) }}</span><span class="aa-countdown-label">秒</span></span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
const props = defineProps({ target: { type: Number, default: () => Date.now() + 3600000 } });
|
|
const now = ref(Date.now());
|
|
let timer = null;
|
|
onMounted(() => { timer = setInterval(() => (now.value = Date.now()), 1000); });
|
|
onBeforeUnmount(() => clearInterval(timer));
|
|
|
|
const diff = computed(() => Math.max(0, props.target - now.value));
|
|
const d = computed(() => Math.floor(diff.value / 86400000));
|
|
const h = computed(() => Math.floor((diff.value % 86400000) / 3600000));
|
|
const m = computed(() => Math.floor((diff.value % 3600000) / 60000));
|
|
const s = computed(() => Math.floor((diff.value % 60000) / 1000));
|
|
const pad = (n) => String(n).padStart(2, '0');
|
|
</script>
|
|
|
|
<style src="./Countdown.css"></style>
|