封装的js文件
export default class Countdown {
static init(endTime, countdownId, that) {
let end = new Date(endTime).getTime()
that.setData({
[countdownId]: {
countdown: parseInt((end - new Date().getTime()) / 1000),
day: parseInt((end - new Date().getTime()) / 1000 / 60 / 60 / 24),
hour: parseInt((end - new Date().getTime()) / 1000 / 60 / 60 % 24),
minute: parseInt((end - new Date().getTime()) / 1000 / 60 % 60),
seconds: parseInt((end - new Date().getTime()) / 1000) % 60
}
})
let interval = setInterval(() => {
that.setData({
[countdownId]: {
countdown: parseInt((end - new Date().getTime()) / 1000),
day: parseInt((end - new Date().getTime()) / 1000 / 60 / 60 / 24),
hour: parseInt((end - new Date().getTime()) / 1000 / 60 / 60 % 24),
minute: parseInt((end - new Date().getTime()) / 1000 / 60 % 60),
seconds: parseInt((end - new Date().getTime()) / 1000) % 60
}
})
if (that.data[countdownId].countdown <= 0) {
clearInterval(interval)
that.setData({
seconds: 0
})
}
}, 1000)
}
}
js
import Countdown from '../../../../../third-utils/countDowm' （引入）
Countdown.init('2020-7-24 18:00:00','countdown1',this) （传入日期使用）
wxml
<view class="weui-flex" style="text-align:center;display: flex;">
<view class="weui-flex__item">{{countdown1.day < 10 ? '0' : ''}}{{countdown1.day}}</view>
<view style="color: #fff;padding: 0 5rpx;">:</view>
<view class="weui-flex__item">{{countdown1.hour < 10 ? '0' : ''}}{{countdown1.hour}}</view>
<view style="color: #fff;padding: 0 5rpx;">:</view>
<view class="weui-flex__item">{{countdown1.minute < 10 ? '0' : ''}}{{countdown1.minute}}</view>
<view style="color: #fff;padding: 0 5rpx;">:</view>
<view class="weui-flex__item">{{countdown1.seconds < 10 ? '0' : ''}}{{countdown1.seconds}}</view>
</view>
可以使用多个 只需要将js使用的第二个参数id修改即可 wxml对用js的参数id
