前言`
需求是写一个活动倒计时页面,根据后端传过来的时间与现在时间做一个对比,再进行倒计时的显示
一、倒计时组件
新建count-down文件,组件样式如下
<template>
<view :endText="endText" :endTime="endTime" class="count_down">
<view class="repeat">{{ hour }}</view>
<span class="colon">:</span>
<view class="repeat">{{ minute }}</view>
<span class="colon">:</span>
<view class="repeat">{{ second }}</view>
</view>
</template>
二、count-down方法
代码如下(示例):
timeDown() {
let nowTime = new Date().getTime()
let endTime = this.endTime
let rightTime = endTime - nowTime
if (rightTime > 0) {
let dd = Math.floor(rightTime / 1000 / 60 / 60 / 24)
let hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
let mm = Math.floor((rightTime / 1000 / 60) % 60);
let ss = Math.floor((rightTime / 1000) % 60);
if (dd > 0) {
hh = dd * 24 + hh
}
this.hour = hh < 10 ? '0' + hh : hh
this.minute = mm < 10 ? '0' + mm : mm
this.second = ss < 10 ? '0' + ss : ss
// console.log(this.hour,"/",this.minute,"/",this.second)
} else {
this.flag = true
}
},
清除定时器
代码如下(示例):
let time = setInterval(() => {
if (this.flag == true) {
clearInterval(time)
}
this.timeDown()
}, 1000)
总结
这是一个比较简单的倒计时组件的写法,记录一下。