最近在做微信小程序的倒计时效果,所以记录下:
有一部分代码是借鉴别人的
啥也不说了,先上效果图
wxml:
<wxs module="filter" src="../../utils/util.wxs"></wxs> <view wx:if="{{!RestDay}}" class="RestDay text-c"> <view> <image class="restDayIco" src="../../assets/images/restDayIco.png" mode="widthFix" /> <text class="RestDay-tit">当前暂无活动进行</text> <text class="RestDay-time">{{openInfo}}</text> <view class="timeOut"> <strong>开团倒计时</strong> <view class="countDown"> <view class="countdown-item"> <view class="countdown-title"> <block> <text class='tui-conutdown-box' wx:if="{{days>3}}"><text>{{days}}</text></text> <text class="countdown-text countdown-day" wx:if="{{days>3}}">天</text> <text class='tui-conutdown-box'><text>{{filter.string(hours,0,1)}}</text></text> <text class='tui-conutdown-box'><text>{{filter.string(hours,1,2)}}</text></text> <text class="countdown-text">:</text> <text class='tui-conutdown-box'><text>{{filter.string(minutes,0,1)}}</text></text> <text class='tui-conutdown-box'><text>{{filter.string(minutes,1,2)}}</text></text> <text class="countdown-text">:</text> <text class='tui-conutdown-box'><text>{{filter.string(seconds,0,1)}}</text></text> <text class='tui-conutdown-box'><text>{{filter.string(seconds,1,2)}}</text></text> <text class="countdown-text"></text> </block> </view> </view> </view> </view> </view> </view>
js:
data中定义相关参数: nowDate:'', //开始时间 countdown: '', //倒计时 days: '00', //天 hours: '00', //时 minutes: '00', //分 seconds: '00', //秒 页面加载完成执行方法: onLoad(options) { this.countTime() } 倒计时的方法: countTime() { var that = this let 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 : seconds minutes = minutes < 10 ? "0" + minutes : minutes hours = hours < 10 ? "0" + hours : hours if (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*/