微信小程序获取验证码30s倒计时

页面效果 

wxml页面代码

<view class='verificationCode'><view class='verificationText'>验证码</view><input class="userName" type="number" placeholder="请输入短信验证码" class='verificationInput'/><view class='getVerification' bindtap="getVerification" wx:if='{{!verificationCodeButton}}'>{{verificationText}}</view><view class='getVerifications' wx:if='{{verificationCodeButton}}'>已发送{{count}}s</view>
</view>

 css页面代码

.verificationCode {height: 126rpx;width: 686rpx;background-color: #fff;border-radius: 20rpx;display: flex;flex-direction: row;margin-top: 32rpx;align-items: center;
}
.verificationText {padding: 0 40rpx;
}
.getVerification,
.getVerifications {padding: 24rpx;border-radius: 16rpx;background: #0099FF;margin-right: 24rpx;font-size: 24rpx;color: #FFFFFF;
}
.getVerifications {background: #9ED4F9;
}
.verificationInput {flex: 1;
}

 js页面代码

Page({data: {verificationCode: null,count: 30,verificationText: '获取验证码',},/*** 30s倒计时*/countDown() {const that = this;const { count } = that.data;if (count == 0) {that.setData({count: 60,verificationCodeButton: false,verificationText: '重新发送'});clearTimeout(time);return;}const time = setTimeout(function () {that.setData({count: count - 1,});that.countDown();}, 1000);},
})