wxml文件
<view class="countdown" style="padding:{{data.content.padding}}px 0;">
<view class="custom-countdown" style="background-color:{{data.content.bg_type == 1?data.content.bg_color:''}};background-image:url({{data.content.bg_type != 1?data.content.bg_image:none}});">
<view class="countdown-box" class="{{data.content.css_type == 1 ?'countdown-style-1':'countdown-style-2'}}" style="color:{{data.content.font_color}};">
<span class="text" wx:if="{{isEnd}}">已结束</span>
<sapn class="text">{{text}}</sapn>
<sapn class="num" wx:if="{{data.content.data_count}}">{{timelist[0]}}</sapn>
<sapn class="text" wx:if="{{data.content.data_count}}">天</sapn>
<sapn class="num">{{timelist[1]}}</sapn>
<sapn class="text">时</sapn>
<sapn class="num">{{timelist[2]}}</sapn>
<sapn class="text">分</sapn>
<sapn class="num">{{timelist[3]}}</sapn>
<sapn class="text">秒</sapn>
</view>
</view>
</view>
js文件
/**
* 组件的属性列表
*/
properties: {
data: {
type: Object,
value: {}
}
},
data数据
data: {
start: '', // 开始时间
end: '', // 结束时间
timelist: [], // 存储时间的数组
time: '', // 存储时间的数组
isEnd: false, // 是否结束
text: '', // 距开始,距结束
data_count: true // 是否按天计算
}
attached: function () {
this.setData({
start: this.data.data.content.start_time, //获取倒计时开始时间
end: this.data.data.content.end_time, //获取倒计时结束时间
data_count: this.data.data.content.data_count //是否按天算
})
},
// 进入组件启动计时器
created: function () {
this.setTime()
},
/**
* 组件的方法列表
*/
methods: {
updateEndTime: function () {
// 开始时间
var start_ = new Date(this.data.start).getTime()
// 结束时间
var end_ = new Date(this.data.end).getTime()
// 当前时间
var date = new Date().getTime()
var lag = ''
var html = '距结束'
if (start_ > date) {
end_ = start_ // 如果开始时间大于当前时间,结束时间等于当前时间
html = '距开始'
}
lag = end_ - date //计算时间差
if (lag > 0) {
// this.data.data_count为true按天倒计时,否则按小时计算
var second = Math.floor(lag / (1000 * 60 * 60 * 24)); //计算天数
var minite = this.data.data_count ? Math.floor(lag / (1000 * 60 * 60) % 24) : Math.floor(lag / (60 * 60 * 1000)); //计算小时数
var hour = this.data.data_count ? Math.floor(lag / (1000 * 60) % 60) : Math.floor((lag - minite * 60 * 60 * 1000) / (60 * 1000)); //计算分钟数
var day = this.data.data_count ? Math.floor(lag / 1000 % 60) : Math.floor((lag - minite * 60 * 60 * 1000 - hour * 60 * 1000) / 1000); //计算秒
// 计算是否补0
second = second < 10 ? "0" + second : second
minite = minite < 10 ? "0" + minite : minite
hour = hour < 10 ? "0" + hour : hour
day = day < 10 ? "0" + day : day
this.setData({
text: html
})
} else {
this.setData({
isEnd: true
})
}
return [second, minite, hour, day]
},
// 开启倒计时
setTime: function () {
var _this = this
_this.data.time = setInterval(() => {
_this.setData({
timelist: _this.updateEndTime()
})
// 清空计时器
if (_this.data.timelist[0] == "00" && _this.data.timelist[1] == "00" && _this.data.timelist[2] == "00" && _this.data.timelist[3] == "00") {
clearInterval(_this.data.time)
}
}, 1000);
}
}