倒计时的功能的三种写法

目前在使用第三种,其他都可用,第一种是对第二种的优化,在调用之前要记得clearInterval

第一种 传入毫秒数

utils

export const ONE_SECOND_TIME_SEC = 1000
export const ONE_MINUTE_TIME_SEC = ONE_SECOND_TIME_SEC * 60
export const ONE_HOUR_TIME_SEC = ONE_MINUTE_TIME_SEC * 60
export const ONE_DAY_TIME_SEC = ONE_HOUR_TIME_SEC * 24 // 一天的毫秒数
export const ONE_YEAR_TIME_SEC = ONE_DAY_TIME_SEC * 365

/**
 * 倒计时
 * @param { Number } num 毫秒数
 * @param { Array } formatList 数组格式 
 ONE_YEAR_TIME_SEC 年
 ONE_DAY_TIME_SEC 天
 ONE_HOUR_TIME_SEC 时
 ONE_MINUTE_TIME_SEC 分
 ONE_SECOND_TIME_SEC 秒数
 * @returns { String } 天时分秒 00:00:00:00 根据formatList匹配
 */
export function countDown (num, formatList = [ONE_YEAR_TIME_SEC,
ONE_DAY_TIME_SEC, ONE_HOUR_TIME_SEC, ONE_MINUTE_TIME_SEC, 1000]) {
  return formatList.map(frt => {
    const result = Math.floor(num / frt)
    num = num % frt
    return result < 10 ? `0${result}` : `${result}`
  }).join(':')
}

vue组件页面中使用

 import { countDown, ONE_MINUTE_TIME_SEC, ONE_HOUR_TIME_SEC } from '@/utils/index'
 data () {
    return {
      time: '00:00:00',
      initTime: 0,
      timer: null,
    }
  },
 methods: {
    // 倒计时
    setInitCountDown () {
      this.time = countDown(this.initTime * 1000, [ONE_HOUR_TIME_SEC, 
      ONE_MINUTE_TIME_SEC, 1000])
    },
    // 获取动态信息
    async getVisitHomeData () {
      this.$loading.show()
      try {
       // 请求接口获取到秒数this.initTime
        this.setInitCountDown()
        this.timer = setInterval(() => {
          this.initTime--
          this.setInitCountDown()
        }, 1000)
      } finally {
        this.$loading.hide()
      }
   }
},
async refreshList () {
  clearInterval(this.timer)
  this.getVisitHomeData()
},

template

{{ time.hour }}:{{ time.minute }}:{{ time.second }}

第二种 传入秒数

utils

export function countDown (val) {
  if (val < 0) {
    return { day: '00', hour: '00', minute: '00', second: '00' }
  }
  const allday = parseInt(val / 24 / 60 / 60)

  const time = val % (24 * 3600)
  const hour = parseInt(time / 60 / 60)
  const minutes = parseInt(time / 60 - hour * 60)
  const seconds = time - hour * 60 * 60 - minutes * 60

  const day0 = parseInt(allday / 10)
  const day1 = allday % 10

  const hour0 = parseInt(hour / 10)
  const hour1 = hour % 10

  const minute0 = parseInt(minutes / 10)
  const minute1 = minutes % 10

  const second0 = parseInt(seconds / 10)
  const second1 = seconds % 10

  return { day: `${day0}${day1}`, hour: `${hour0}${hour1}`,
  minute: `${minute0}${minute1}`, second: `${second0}${second1}` }
}

vue组件页面中使用

import { countDown } from '@/utils/index'
data () {
    return {
      time: {
        hour: '00',
        minute: '00',
        second: '00',
      },
      initTime: 0,
      timer: null,
    }
},
methods: {
    // 倒计时
    setInitCountDown () {
      const { hour, minute, second } = countDown(this.initTime)
      this.time = { hour, minute, second }
    },
    // 获取动态信息
    async getVisitHomeData () {
      this.$loading.show()
      try {
       // 请求接口获取到秒数this.initTime
        this.setInitCountDown()
        this.timer = setInterval(() => {
          this.setInitCountDown()
          this.initTime--
        }, 1000)
      } finally {
        this.$loading.hide()
      }
    },
    // 刷新列表
    async refreshList () {
      clearInterval(this.timer)
      this.getVisitHomeData()
    },
},

template

{{ time }}

第三种 传入秒数

utils

/* 日期转换 把总秒数直接返回{ day, hour, minute, second }
 * @param { Number } seconds 传入秒数
 */
export const dateTransform = (seconds) => {
  let [day, hour, minute, second] = [0, 0, 0, 0] // 初始化
  if (seconds > 0) {
    day = Math.floor(seconds / (60 * 60 * 24))
    hour = Math.floor(seconds / (60 * 60)) - day * 24
    minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60
    second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
  }
  // 小于10的，在前面加0
  day = day.toString().padStart(2, '0')
  hour = hour.toString().padStart(2, '0')
  minute = minute.toString().padStart(2, '0')
  second = second.toString().padStart(2, '0')
  return { day, hour, minute, second }
}

vue组件页面中使用

import { dateTransform } from '@/utils/index'
data () {
    return {
      timeObj: null,
      initTime: 0,
      timer: null,
    }
},
methods: {
    // 倒计时
    setInitCountDown () {
      this.timeObj = dateTransform(this.initTime)
    },
    // 获取动态信息
    async getVisitHomeData () {
      this.$loading.show()
      try {
        // 请求接口获取到秒数this.initTime
        this.setInitCountDown()
        this.timer = setInterval(() => {
          this.initTime--
          this.setInitCountDown()
        }, 1000)
      } finally {
        this.$loading.hide()
      }
    },
    // 刷新列表
    async refreshList () {
      clearInterval(this.timer)
      this.getVisitHomeData()
    },
},

template渲染

{{ timeObj && `${timeObj.day || '00'}:${timeObj.minute || '00'}:
${timeObj.second || '00'}` || '00:00:00' }}