1.

图示：(为了录屏把计时器调快了自己吧计时器设成一分钟就行)

2.

wxml代码：

viewclass'shouji_info'viewclass'info_list'inputplaceholder'请输入手机号'bindinput"phoneInput"/input/viewviewclass'info_list'inputclass'left'placeholder'验证码'/inputbuttonclass'rightyanzheng_btn'bindtap"bindButtonTap"disabled'{{disabled}}'style"background-color:{{color}}"{{text}}/button/view/view3.

wxss代码：

page{font-size:30rpx;}.left{float:left}.right{float:right}.info_list{height:103rpx;line-height:103rpx;width:100%;border-bottom:1pxsolid#bcbcbd;padding-left:24rpx;display:inline-block;font-size:33rpx;}.shouji_infoinput{margin-top:25rpx;/*background:rebeccapurple;*/}.yanzheng_btn{width:207rpx;background:#929fff;margin-right:20rpx;height:82rpx;margin-top:12rpx;text-align:center;line-height:82rpx;border-radius:15rpx;color:#fff;font-size:33rpx;padding:010rpx;}4.

js代码

//pages/biji/biji.jsPage({data:{text:'获取验证码',//按钮文字currentTime:61,//倒计时disabled:false,//按钮是否禁用phone:''//获取到的手机栏中的值},//获取手机栏input中的值phoneInput:function(e){this.setData({phone:e.detail.value})},//获取验证码按钮事件bindButtonTap:function(){varthatthis;that.setData({disabled:true,//只要点击了按钮就让按钮禁用（避免正常情况下多次触发定时器事件）color:'#ccc',})varphonethat.data.phone;varcurrentTimethat.data.currentTime//把手机号跟倒计时值变例成js值varwarnnull;//warn为当手机号为空或格式不正确时提示用户的文字，默认为空if(phone''){warn"号码不能为空";}elseif(phone.trim().length!11||!/^1[3|4|5|6|7|8|9]d{9}$/.test(phone)){warn"手机号格式不正确";}else{//当手机号正确的时候提示用户短信验证码已经发送wx.showToast({title:'短信验证码已发送',icon:'none',duration:2000});//设置一分钟的倒计时varintervalsetInterval(function(){currentTime--;//每执行一次让倒计时秒数减一that.setData({text:currentTime+'s',//按钮文字变成倒计时对应秒数})//如果当秒数小于等于0时停止计时器且按钮文字变成重新发送且按钮变成可用状态倒计时的秒数也要恢复成默认秒数即让获取验证码的按钮恢复到初始化状态只改变按钮文字if(currentTime0){clearInterval(interval)that.setData({text:'重新发送',currentTime:61,disabled:false,color:'#929fff'})}},100);};//判断当提示错误信息文字不为空即手机号输入有问题时提示用户错误信息并且提示完之后一定要让按钮为可用状态因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况if(warn!null){wx.showModal({title:'提示',content:warn})that.setData({disabled:false,color:'#929fff'})return;};},})5.

来个容易懂得代码片段

Page({data:{text:'获取验证码',//按钮文字currentTime:61,//倒计时disabled:false,//按钮是否禁用phone:''//获取到的手机栏中的值},//获取手机栏input中的值phoneInput:function(e){this.setData({phone:e.detail.value})},//获取验证码按钮事件bindButtonTap:function(){varthatthis;varphonethat.data.phone;varcurrentTimethat.data.currentTimeif(phone''){wx.showModal({title:'提示',content:"号码不能为空"})}elseif(phone.trim().length!11||!/^1[3|4|5|6|7|8|9]d{9}$/.test(phone)){wx.showModal({title:'提示',content:"手机号格式不正确"})}else{//当手机号正确的时候提示用户短信验证码已经发送并禁止按钮点击导致定时器多次触发的bugthat.setData({disabled:true,color:'#ccc',})wx.showToast({title:'短信验证码已发送',icon:'none',duration:2000});//设置一分钟的倒计时varintervalsetInterval(function(){currentTime--;//每执行一次让倒计时秒数减一that.setData({text:currentTime+'s',//按钮文字变成倒计时对应秒数})//如果当秒数小于等于0时停止计时器且按钮文字变成重新发送且按钮变成可用状态倒计时的秒数也要恢复成默认秒数即让获取验证码的按钮恢复到初始化状态只改变按钮文字if(currentTime0){clearInterval(interval)that.setData({text:'重新发送',currentTime:61,disabled:false,color:'#929fff'})}},100);};},})