<template>
? <span class="setInterval-box">{{time}}</span>
</template>
<script>
export default {
? name: 'Timer',
? data() {
? ? return {
? ? ? hour: 0,
? ? ? minute: 0,
? ? ? second: 0,
? ? ? timer: null
? ? }
? },
? props: {
? ? remainingTime: {
? ? ? type: String,
? ? ? default: '00:00:00'
? ? }
? },
? computed: {
? ? time() {
? ? ? return `${this.hour < 10 ? `0${this.hour}` : this.hour}:${parseInt(this.minute / 60, 0) < 10 ? `0${parseInt(this.minute / 60, 0)}` : parseInt(this.minute / 60, 0)}:${this.second < 10 ? `0${this.second}` : this.second}`
? ? }
? },
? mounted() {
? ? if (this.remainingTime) {
? ? ? const Array = this.remainingTime.split(':')
? ? ? this.hour = parseInt(Array[0], 0)
? ? ? this.minute = parseInt(Array[1], 0)
? ? ? this.second = parseInt(Array[2], 0)
? ? ? this.timeDown()
? ? }
? },
? methods: {
? ? timeDown() {
? ? ? let totalSecond = this.hour * 3600 + this.minute * 60 + this.second;
? ? ? const second2Time = (seconds) => {
? ? ? ? this.hour = parseInt(seconds / 3600, 0);
? ? ? ? this.minute = parseInt(seconds % 3600, 0);
? ? ? ? this.second = parseInt(seconds % 3600 % 60, 0);
? ? ? };
? ? ? this.timer = setInterval(() => {
? ? ? ? if (totalSecond) {
? ? ? ? ? totalSecond -= 1;
? ? ? ? ? second2Time(totalSecond)
? ? ? ? } else {
? ? ? ? ? clearInterval(this.timer)
? ? ? ? }
? ? ? }, 1000)
? ? }
? },
? beforeDestroy() {
? ? clearInterval(this.timer)
? },
}
</script>
