微信小程序倒计时效果

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

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

啥也不说了，先上效果图

 

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*/