image.png
CountDate.vue
<template>
<div class="count-content">
<span>{{ dayString }}</span>天<span>{{ hourString }}</span>小时<span>{{ minuteString }}</span>分钟<span>{{ secondString }}</span>秒
</div>
</template>
<script>
export default {
props: {
remainTime: {
// 倒计时间总秒数
type: Number,
default: 0
}
},
data() {
return {
day: '',
hour: '',
minute: '',
second: '',
promiseTimer: ''
}
},
computed: {
hourString() {
return this.formatNum(this.hour)
},
minuteString() {
return this.formatNum(this.minute)
},
secondString() {
return this.formatNum(this.second)
},
dayString() {
return this.formatNum(this.day)
}
},
mounted() {
if (this.remainTime > 0) {
this.day = Math.floor((this.remainTime / 3600) / 24)
this.hour = Math.floor((this.remainTime / 3600) % 24)
this.minute = Math.floor((this.remainTime / 60) % 60)
this.second = Math.floor(this.remainTime % 60)
this.countDowm()
}
},
methods: {
countDowm() {
var self = this
clearInterval(this.promiseTimer)
this.promiseTimer = setInterval(function() {
if (self.day === 0) {
if (self.hour === 0) {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.second = 0
self.$emit('countDowmEnd', true)
clearInterval(self.promiseTimer)
} else {
self.second -= 1
}
} else {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.hour -= 1
self.minute = 59
self.second = 59
} else {
self.second -= 1
}
}
} else {
if (self.hour === 0 && self.minute === 0 && self.second === 0) {
self.day -= 1
self.hour = 23
self.minute = 60
self.second = 60
} else {
if (self.hour === 0) {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.second = 0
} else {
self.second -= 1
}
} else {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.hour -= 1
self.minute = 59
self.second = 59
} else {
self.second -= 1
}
}
}
}
}, 1000)
},
formatNum(num) {
return num < 10 ? '0' + num : '' + num
}
}
}
</script>
<style scoped lang="scss">
.count-content {
span {
font-size: 25px;
font-weight: bold;
color: #fe2828;
margin-right: 10px;
margin-left: 10px;
}
}
</style>
包含天数，如果不需要显示多少天，countDown的方法里面，改为：
countDowm() {
var self = this;
clearInterval(this.promiseTimer);
this.promiseTimer = setInterval(function () {
// console.log("打印---day---",self.day)
if (self.hour === 0) {
if (self.minute !== 0 && self.second === 0) {
self.second = 59;
self.minute -= 1;
} else if (self.minute === 0 && self.second === 0) {
self.second = 0;
self.$emit("countDowmEnd", true);
clearInterval(self.promiseTimer);
} else {
self.second -= 1;
}
} else {
if (self.minute !== 0 && self.second === 0) {
self.second = 59;
self.minute -= 1;
} else if (self.minute === 0 && self.second === 0) {
self.hour -= 1;
self.minute = 59;
self.second = 59;
} else {
self.second -= 1;
}
}
}, 1000);
},
再去掉天数的显示就可以了。
组件的调用方式为：
<countDate :remain-time="remainTime" />
created( ){
const st1 = new Date('2021-3-24 11:59:40').getTime()
const st2 = new Date('2021-3-26 13:00:00').getTime()
const desc = st2 - st1
this.remainTime = desc / 1000
console.log('时间减法----', desc / 1000)
}
因为.getTime()是获取从1970年到指定时间之间的毫秒数，而组件内是按照秒数来计算的，所以需要除以1000
- 注意：传递时间参数的时候，当时间为2020/12/31 24:00:00时，ios手机调用New Date().getTime方法会显示NaN,但是浏览器和安卓手机没有问题，原因是时间格式在ios无法识别，应该改成:2021/01/01 00:00:00
