倒计时 天时分秒的封装
由于自身工作接触到的项目,对于倒计时的使用相对有些频繁,封装倒计时组件就很有必要了
话不多说,上代码
<template>
<view class="time">
<text class="txtAll" v-if="isDay === true">{{ day }}</text>
<text class="timeTxt">{{ dayText }}</text>
<text class="txtAll">{{ hour }}</text>
<text class="timeTxt">{{ hourText }}</text>
<text class="txtAll">{{ minute }}</text>
<text class="timeTxt">{{ minuteText }}</text>
<text class="txtAll">{{ second }}</text>
<text class="timeTxt">{{ secondText }}</text>
</view>
</template>
<script>
export default {
name: 'SeckillCountDown',
props: {
dayText: {
type: String,
default: '天',
},
hourText: {
type: String,
default: '时',
},
minuteText: {
type: String,
default: '分',
},
secondText: {
type: String,
default: '秒',
},
datatime: {},
isDay: {
type: Boolean,
default: true,
},
},
data() {
return {
timeInterval: null,
time: this.datatime,
day: '00',
hour: '00',
minute: '00',
second: '00',
}
},
created() {
this.show_time()
},
watch: {
//监听时间的变化
datatime(val) {
clearInterval(this.timeInterval)
this.time = val
this.show_time()
},
},
mounted() {
},
methods: {
show_time() {
console.log(this.datatime)
if (this.time.toString().length == 13) {
//13位数的时间戳
// 毫秒级
// console.log('毫秒')
this.time = this.time / 1000
} else if (this.time.toString().length == 10) {
// console.log('秒')
// 秒级
} else {
// 时间 日期
// console.log('时间')
this.time = Date.parse(this.time) / 1000
}
this.runTime()
this.timeInterval = setInterval(this.runTime, 1000)
},
runTime() {
//时间函数
let intDiff = this.time - Date.parse(new Date()) / 1000 //获取数据中的时间戳的时间差
let day = 0,
hour = 0,
minute = 0,
second = 0
if (intDiff > 0) {
//转换时间
if (this.isDay === true) {
day = Math.floor(intDiff / (60 * 60 * 24)) //转换天数
} else {
day = 0
}
hour = Math.floor(intDiff / (60 * 60)) - day * 24 //转换时
minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60 //转换分
second = Math.floor(intDiff) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60//转换秒
//拼接0
if (hour <= 9) hour = '0' + hour
if (minute <= 9) minute = '0' + minute
if (second <= 9) second = '0' + second
this.day = day
this.hour = hour
this.minute = minute
this.second = second
} else {
this.day = '00'
this.hour = '00'
this.minute = '00'
this.second = '00'
}
}
},
destroyed() {
clearTimeout(this.timeInterval) //页面销毁时取消定时器
}
}
</script>
哈哈哈哈这里的样式应该也是传值的,但是我太懒了
<style lang="less">
.txtAll{
display: inline-block;
line-height: 40rpx;
text-align: center;
background-color: #FFFFFF;
width: 40rpx;
height: 40rpx;
border-radius: 5rpx;
color: #ff7900;
}
</style>
然后直接在组件上引入使用就好啦
<SeckillCountDown :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="item.stop"></SeckillCountDown>
datatime传入的是时间
最终呈现的效果就是这样啦!
完结啦!!!
喜欢的留下你的小脚丫~