想要的效果:
image.png
wxml:
<view class='name' wx:if="{{countDown}}">
<view class='name_left'>FENDI</view>
<view class='name_right'>活動結(jié)束:{{day}}天 <text>{{hou}}</text>:<text>{{min}}</text>:<text>{{sec}}</text></view>
</view>
wxss:
.name_right{width:400rpx;font-size:24rpx;color:#F9524A;text-align:right;}
.name_right text{background:#F9524A;border-radius:6rpx;color:#fff;padding:2rpx 6rpx;}
js:
data: {
endTime: '2018-11-22 10:40:30'//2018/11/22 10:40:30這種格式也行
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this;
that.countDown()
},
// 倒計時
countDown:function(){
var that=this;
var nowTime = new Date().getTime();//現(xiàn)在時間(時間戳)
var endTime = new Date(that.data.endTime).getTime();//結(jié)束時間(時間戳)
var time = (endTime-nowTime)/1000;//距離結(jié)束的毫秒數(shù)
// 獲取天婉商、時、分渣叛、秒
let day = parseInt(time / (60 * 60 * 24));
let hou = parseInt(time % (60 * 60 * 24) / 3600);
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
// console.log(day + "," + hou + "," + min + "," + sec)
day = that.timeFormin(day),
hou = that.timeFormin(hou),
min = that.timeFormin(min),
sec = that.timeFormin(sec)
that.setData({
day: that.timeFormat(day),
hou: that.timeFormat(hou),
min: that.timeFormat(min),
sec: that.timeFormat(sec)
})
// 每1000ms刷新一次
if (time>0){
that.setData({
countDown: true
})
setTimeout(this.countDown, 1000);
}else{
that.setData({
countDown:false
})
}
},
//小于10的格式化函數(shù)(2變成02)
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
//小于0的格式化函數(shù)(不會出現(xiàn)負數(shù))
timeFormin(param) {
return param < 0 ? 0: param;
},
主要是丈秩,獲取當前日期轉(zhuǎn)換為時間戳 和把結(jié)束時間轉(zhuǎn)為時間戳:
var nowTime = new Date().getTime();//現(xiàn)在時間(時間戳)
var endTime = new Date(that.data.endTime).getTime();//結(jié)束時間(時間戳)