最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击【获取验证码】按钮出现的倒计时效果。
.wxml
<button class="buttonget" disabled=‘{{disabled}}‘ data-id="2" bindtap="getVerificationCode"> {{time}} </button>
.js
var interval = null //倒计时函数 Page({ data: { date: ‘请选择日期‘, fun_id: 2, time: ‘获取验证码‘, //倒计时 currentTime: 60 }, getCode: function (options) { var that = this; var currentTime = that.data.currentTime interval = setInterval(function () { currentTime--; that.setData({ time: currentTime + ‘秒‘ }) if (currentTime <= 0) { clearInterval(interval) that.setData({ time: ‘获取‘, currentTime: 60, disabled: false }) } }, 1000) }, getVerificationCode() { this.getCode(); var that = this that.setData({ disabled: true }) }, })
.wxss
.buttonget { margin-right: 250rpx; width:110rpx; height:55rpx; color: #20B6C5; line-height: 50rpx; font-size: 25rpx; border:1rpx solid #20B6C5; } /*隐藏Button按钮本身的边框*/ button[class="buttonget"]::after { border: 0; }
原文:https://www.cnblogs.com/Early-Bird/p/8184193.html