vue 微信录音倒计时_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组件

{{ surplus | filterTime }}

/**

* 能力： 传递给组件一个活动时间，组件根据这个时间去进行计算

*1、当时间未到开始时间的时候： 展示倒计时

*2、当时间到了开始时间的时候： 活动进行中

*3、当时间超过了开始时间的时候：活动已经结束

*/

export default {

name: 'CountDown',

props: {

// 活动开始时间

endHours: {

type: Number,

required: true,

default: 0

}

},

created () {

this.computedSurplusTime()

},

data () {

return {

// 展示活动状态

surplus: '',

// 距离活动开始的秒数

diffSeconds: 0,

interval: undefined

}

},

methods: {

computedSurplusTime () {

if (this.interval) {

clearInterval(this.interval)

}

const date = new Date()

/**

* 当前时间过了开始时间，活动结束

*/

if (date.getHours() > this.endHours) {

this.surplus = '活动已结束'

return

}

/**

* 当前时间到了开始时间，活动进行中

*/

if (date.getHours() === this.endHours) {

this.surplus = '活动进行中'

return

}

/**

* 当前时间未到开始时间的时候：显示倒计时

* 1、获取当前时间与活动开始时间的秒数差距

* 2、根据秒数转化为对应的 -> 时分秒

*/

// 差距时数

// 开始时间16 ，当前时间 12. 3小时59分59秒

const diffHours = this.endHours - date.getHours() - 1

// 差距分钟数

const diffMinutes = 60 - date.getMinutes() - 1

// 差距秒数

const diffSeconds = 60 - date.getSeconds()

// 转化为对应的秒数

this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds

// 当时间每过1秒 秒数差距应该 - 1

this.interval = setInterval(() => {

this.diffSeconds -= 1

}, 1000)

}

},

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()

}

}

}

}

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()

}

}

}

话不多说，慢慢品味吧～