普歌-Vue 封装防刷新考试倒计时组

date.vue

<!-- 定时器组件 -->
<template>
  <div class="">
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 父组件传过来的秒数
    seconds: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      count: '', // 倒计时
      secondsTemp: this.seconds, // 接收props传过来的值
      timer: null, // 清除定时器
      setSeconds: '', // 本地存储 结束的时间
      getSeconds: localStorage.getItem('lastTime'), // 本地获取 结束的时间
      endSeconds: '', // 结束时间的时间戳
      nowSeconds: new Date().getTime() // 当前时间的时间戳
    }
  },
  mounted() {
    // 定时器
    const timer = setInterval(() => {
      this.secondsTemp--
      this.countDown(this.secondsTemp)
      if (this.secondsTemp === 0) {
        clearInterval(timer)
        localStorage.removeItem('lastTime')
      }
    }, 1000)
  },
  created() {
    // 判断是否是第一次进入答题页面
    if (this.getSeconds) {
      this.secondsTemp = parseInt((this.getSeconds - this.nowSeconds) / 1000)
    } else {
      this.timeDown()
    }
  },
  destroyed() {
    // console.log('destroyed' + '=========' + this.timer)
    // 清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    /**
     * 获取结束时间的时间戳并保存到本地
     */
    timeDown() {
      this.endSeconds = this.nowSeconds + this.secondsTemp * 1000
      this.setSeconds = localStorage.setItem('lastTime', this.endSeconds)
      this.countDown(this.secondsTemp)
    },
    // 时 分 秒 格式化函数
    countDown(seconds) {
      if (seconds >= 1) {
        let h = parseInt((seconds / (60 * 60)) % 24)
        h = h < 10 ? '0' + h : h
        let m = parseInt((seconds / 60) % 60)
        m = m < 10 ? '0' + m : m
        let s = parseInt(seconds % 60)
        s = s < 10 ? '0' + s : s
        this.count = h + ':' + m + ':' + s
      } else {
        this.count = '00:00:00'
      }
    }
  }
}
</script>
<style scoped>
</style>

父组件调用

// 引入
import CountDown from '@/components/date'
// 父组件
<count-down :seconds="seconds"/>

---

作者：Cnc_zj
本文源自：Cnc_zj的《普歌-Vue 封装防刷新考试倒计时组》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。