微信小程序倒计时
wxml:
<view class='name' wx:if="{{countDown}}"> <view class='name_left'>FENDI</view> <view class='name_right'>活动结束:{{day}}天 <text>{{hou}}</text>:<text>{{min}}</text>:<text>{{sec}}</text></view> </view>
xss:
.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这种格式也行 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.countDown() }, // 倒计时 countDown:function(){ var that=this; var nowTime = new Date().getTime();//现在时间(时间戳) var endTime = new Date(that.data.endTime).getTime();//结束时间(时间戳) var time = (endTime-nowTime)/1000;//距离结束的毫秒数 // 获取天、时、分、秒 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的格式化函数(2变成02) timeFormat(param) { return param < 10 ? '0' + param : param; }, //小于0的格式化函数(不会出现负数) timeFormin(param) { return param < 0 ? 0: param; },
主要是,获取当前日期转换为时间戳 和把结束时间转为时间戳:
var nowTime = new Date().getTime();//现在时间(时间戳) var endTime = new Date(that.data.endTime).getTime();//结束时间(时间戳)