<template>
<view>
<view class="countDownBox">
<view><span class="timeSpan" v-if="d!=0">{{d}}天</span><span class="timeSpan">{{h}}</span>:<span class="timeSpan">{{m}}</span>:<span
class="timeSpan">{{s}}</span></view>
</view>
</view>
</template>
<script>
export default {
//结束时间 time: '12:30', //开始时间 notTimes: '10:48:07'
name: "cutdowntime",
props: {
time: {
type: String,
default: ''
},
notTimes: {
type: String,
default: ''
}
},
data() {
return {
d: '00',
h: '00',
m: '00',
s: '00',
difference: 0,
timess: null,
flag: false
}
},
watch: {
time (val) {
this.startTime()
this.flag = false
this.timeDown()
}
},
created () {
console.log("55");
this.startTime()
this.timeDown()
},
methods: {
// 初始化时间
startTime () {
let nowTime = new Date()
let Y = nowTime.getFullYear()
let M = nowTime.getMonth() + 1
let D = nowTime.getDate()
// let time = Y + '/' + M + '/' + D + ' ' + this.time + ':00'//结束时间
let nowTime2 = Y + '/' + M + '/' + D + ' ' + this.notTimes.split('.')[0]
console.log(nowTime2);
console.log(this.time);
let beginTime = new Date(nowTime2)
let endTime = new Date(this.time)
this.difference = parseInt((endTime.getTime() - beginTime.getTime()) / 1000)
console.log(this.difference);
if (this.difference<0) {
this.$emit('timeEnd')
}
},
// 倒计时
timeDown () {
// 切换清除之前的定时器
clearInterval(this.timess)
this.timess = setInterval(() => {
if (this.flag === true) {
clearInterval(this.timess)
this.$emit('timeEnd')
}
this.difference = this.difference - 1
if (this.difference > 0) {
this.d = parseInt(this.difference / (60 * 60 * 24))
this.h = this.format(parseInt(this.difference / (60 * 60) % 24))
this.m = this.format(parseInt((this.difference / 60) % 60))
this.s = this.format(parseInt(this.difference % 60))
} else {
this.d = '00'
this.h = '00'
this.m = '00'
this.s = '00'
this.flag = true;
this.$emit('timeEnd')
}
}, 1000)
},
// 时间格式
format (time) {
if (time >= 10) {
return time
} else {
return `0${time}`
}
}
}
}
</script>
<style scoped>
.countDownBox{
font-size: 0.28rem;
padding-right: 0.1rem;
}
.homeTime{
color: #EA564A;
float: left;
}
.DetailTime{
text-align: center;
color: #EA564A;
}
.timeSpan{
color: rgba(234,86,74,1);
width: auto;
height: 20px;
font-size: 13px;
border-radius: 6px;
display: inline-block;
line-height: 20px;
}
</style>
父页面
import cutdowntimes from "../../../components/cutdowntime/cutdowntime.vue";
components: {
cutdowntimes
},
<view class="dssa">
<cutdowntimes :time="SellTime" :notTimes="nowTime" @timeEnd="callAction()"></cutdowntimes>
</view>