微信小程序倒计时效果

最近在做微信小程序的倒计时效果，所以记录下：

有一部分代码是借鉴别人的

啥也不说了，先上效果图

wxml：

当前暂无活动进行{{openInfo}}开团倒计时{{days}}天{{filter.string(hours,0,1)}}{{filter.string(hours,1,2)}}:{{filter.string(minutes,0,1)}}{{filter.string(minutes,1,2)}}:{{filter.string(seconds,0,1)}}{{filter.string(seconds,1,2)}}

js： 

data中定义相关参数：
nowDate:'', //开始时间countdown: '', //倒计时days: '00', //天hours: '00', //时minutes: '00', //分seconds: '00', //秒 页面加载完成执行方法：
onLoad(options) {this.countTime()
}倒计时的方法：countTime() {var that = thislet days, hours, minutes, seconds;let nowDate = that.data.nowDate;if(nowDate=='' || nowDate==null || nowDate==undefined){return}// console.log(nowDate)nowDate = nowDate.replace(/-/g, '/')let now = new Date().getTime();let end = new Date(nowDate).getTime();let leftTime = end - now;if (leftTime >= 0) {days = Math.floor(leftTime / 1000 / 60 / 60 / 24);hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);minutes = Math.floor(leftTime / 1000 / 60 % 60);seconds = Math.floor(leftTime / 1000 % 60);seconds = seconds < 10 ? "0" + seconds : secondsminutes = minutes < 10 ? "0" + minutes : minuteshours = hours < 10 ? "0" + hours : hoursif (days != 0 && days < 4) {hours = (days * 24) + parseInt(hours)}that.setData({countdown: days + ":" + hours + "：" + minutes + "：" + seconds,days,hours,minutes,seconds})if (days == '00' && hours == '00' && minutes == '00' && seconds == '00') {this.setData({PresaleBtn: true,countDownText: false})}setTimeout(that.countTime, 1000);} else {that.setData({nowDate: that.data.endTime,countDownText: false,timeText: '结束'})that.countTime()}},

wxss： 

.RestDay{min-height:70%;display:flex;align-items:center;justify-content:center;color:#aaa;}
.RestDay .restDayIco{margin-bottom:20rpx;max-width:60%;}
.RestDay text{display:block;}
.RestDay text.RestDay-tit{font-size:30rpx;}
.RestDay text.RestDay-time{font-size:22rpx;}
.RestDay .week{color:rgba(230,128,56);}
.RestDay .timeOut{padding-top:50rpx;}
.RestDay .timeOut strong{padding-bottom:24rpx;font-weight:600;color:#f14724;display:block;}/*倒计时-S*/
.countdown-item {display:flex;justify-content: center;}
.countDown{color:#E83400;text-align:center;box-sizing:border-box;display: flex;justify-content: center;}
.countdown-title{font-size:28rpx;color: #fff;display:flex;align-items:center;justify-content:center;}
.surplus-text{font-size:40rpx;color: #EF3E51;}
.tui-conutdown-box{margin:0 4rpx;padding:16rpx;border-radius:8rpx;display:flex;align-items:center; background-color:#E83400;color: #fff;font-weight:600;font-size:48rpx;}
.tui-conutdown-box text{transform: scale(1,1.2);}
.tui-countdown-bg {background-color:#E83400;}
.countdown-text{margin:0 10rpx; color:#E83400;font-weight:600;font-size:60rpx;}
.countdown-day{font-size:32rpx;}
/*倒计时-E*/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！