在前面的一篇文章中，我们使用了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组件
<template>
<div class="count-down">
<span>{{ surplus | filterTime }}</span>
</div>
</template>
<script>
/**
* 能力： 传递给组件一个活动时间，组件根据这个时间去进行计算
*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()
}
}
}
}
</script>
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
})
使用
<CountDown :endHours="23"></CountDown>
这种方法中最精彩地方就是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()
}
}
}
话不多说，慢慢品味吧～
网友评论