vue项目中实现倒计时功能

在前面的一篇文章中，我们使用了vue的filters属性实现了商品金额的格式化处理操作，本篇文章，我们来实现秒杀商品的倒计时功能。

countdown

      其实，倒计时的功能也不算特别复杂，常见的思路就是计算出结束时间和开始时间相差的秒数，然后通过转化函数转化为对应格式的时间。使用setInterval间歇调用，实现倒计时功能。
      这也是我一直使用的方法，比较稳，代码也比较清晰。咱们码上见真知。

/*
*eventStartTime： 开始时间
*eventEndTime：结束时间
*time： 服务器返回的当前时间
*/
function getTimes (eventStartTime, eventEndTime, time) {
   hour = '',
   minutes = '',
   seconds = '';
   var yms = anVar.currentTime.substring(0, 10),
       startTime = new Date(yms + " " + eventStartTime).getTime() / 1000,
       endTime = new Date(yms + " " + eventEndTime).getTime() / 1000,
       timeObj = {} 

       // 还没开始
       if (time < startTime) {
           number = startTime - time;
           timeObj = self.getTimeNumber(number);
       } else if (time === startTime) {
                   
       } else if (time === endTime) {
                   
       } else if (time > startTime && time < endTime) {
              // 活动进行中
       } else if (time > endTime) {
          // 活动已经结束
                   
      }
}
// 计算时间
function getTimeNumber (number) {
   var hour = Math.floor(number / 3600), //小时
         minutes = Math.floor((number - hour * 3600) / 60),
         seconds = Math.floor(number - (hour * 3600 + minutes * 60));
         return {
             hour: hour,
             minutes: minutes,
             seconds: seconds
        }
}

上面的方法不难吧，就是有点繁琐。其他还好。下面我们就来看一下别人的实现方式，小心闪亮到你的奥。
新建CountDown.vue组件

filters.js

import Vue from 'vue'
Vue.filter('filterTime', function (value) {
  if (!value) {
    return ''
  }

  // value 不是时间格式 时：分： 秒
  if (value.indexOf(':') === -1) {
    return value
  }

  let result = ''
  const arr = value.split(':')
  // 对小时、分钟、0秒数 补0
  if (parseInt(arr[0]) < 10) {
    result = '0' + arr[0]
  } else {
    result = arr[0]
  }

  if (parseInt(arr[1]) < 10) {
    result = result + ':0' + arr[1]
  } else {
    result = result + ':' + arr[1]
  }

  if (parseInt(arr[2]) < 10) {
    result = result + ':0' + arr[2]
  } else {
    result = result + ':' + arr[2]
  }
  return result
})

使用

这种方法中最精彩地方就是watch监听函数中对diffSeconds的处理。

watch: {
    diffSeconds (newV) {
      // 当前的秒数 / 3600，向下取整，获取到转化的小时数
      const hours = Math.floor(newV / 3600)
      // 当前秒数 / 60，向下取整
      // 获取到所有分钟数 3600 / 60 = 60分钟
      // 对60取模，超过小时数的分钟数
      const minutes = Math.floor(newV / 60) % 60
      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
      const seconds = newV % 60
      // 拼装数据
      this.surplus = hours + ':' + minutes + ':' + seconds
      /**
       * 在当前秒数 变为 0， 需要修改展示数据
       */
      if (newV === 0) {
        this.computedSurplusTime()
      }
    }
  }

话不多说，慢慢品味吧～