35 lines
1.4 KiB
Vue
35 lines
1.4 KiB
Vue
<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>
|
|
export default {
|
|
name: 'AaCountdown',
|
|
props: { target: { type: Number, default: () => Date.now() + 3600000 } },
|
|
data() {
|
|
return { now: Date.now(), timer: null };
|
|
},
|
|
computed: {
|
|
diff() { return Math.max(0, this.target - this.now); },
|
|
d() { return Math.floor(this.diff / 86400000); },
|
|
h() { return Math.floor((this.diff % 86400000) / 3600000); },
|
|
m() { return Math.floor((this.diff % 3600000) / 60000); },
|
|
s() { return Math.floor((this.diff % 60000) / 1000); }
|
|
},
|
|
mounted() {
|
|
this.timer = setInterval(() => { this.now = Date.now(); }, 1000);
|
|
},
|
|
beforeDestroy() { clearInterval(this.timer); },
|
|
methods: { pad(n) { return String(n).padStart(2, '0'); } }
|
|
};
|
|
</script>
|
|
|
|
<style src="./Countdown.css"></style>
|