效果如下：点击发送验证码按钮，按钮背景变色，不可点击，显示倒计时文字

首先射流研究…文件的数据里面声明一个变量用于表示当前是否可以点击，codeIsCanClick=true，默认是可以点击的

写下界面代码：

页面结构文件中

视图类='中心行'视图类='输入标签'动态码：/视图输入类=' inputStyle ' style=' flex :1 ' bind input=' bindKeyInput '占位符='短信动态码adjust-position=' false ' confirm-type=' search '/input button class=' email code ' hidden=' { {！codeIsCanClick } } ' size=' mini ' bind tap=' click code '获取动态码/button button class=' emailCodeSend ' hidden=' { { codeIsCanClick } } ' size=' mini ' { { last _ time } }秒后重新发送/按钮/视图对应样式页面样式表文件：center row { display : flex flex-direction : row；align-items:居中；高度： 44px左填充左侧： 16px填充-右侧： 16px边框-底部： 1rpx实心# D9D 9；边框-top: 1rpx实心# D9D 9；}.输入样式{ border-radius :4 px颜色： # D9D 9；大纲：0左填充左： 4px左边距左： 4px右边距： 20 rpxfont-size : 14px}.inputLabel { font-size : 16px颜色： # 33496D宽度： 90px}.电子邮件代码{ width: 118px高度： 28pxalign-items:居中；正义-内容：中心；display : flex flex-方向：行；颜色：白色；font-size : 14px背景-颜色： # 50A2EC边界半径： 14px}.emailCodeSend { width: 118px高度： 28pxalign-items:居中；正义-内容：中心；display : flex flex-方向：行；颜色：白色；font-size : 14px背景-颜色： # B9DAF 7；边界半径： 14px}以上构成页面静态效果。

注意按钮有两个，分别对应的未点击和点击下的按钮样子，用射流研究…中的CodeIsCanClick控制显示隐藏

然后在射流研究…中写逻辑代码：

//倒计时事件单位结构向量自回归模型倒计时=10;var settime=函数(即){ if(倒计时==0){那个。setdata({ codeiscanck 3360 true })倒计时=10;返回；}否则{那。setdata({ codeiscanck: false，last_time:倒计时})倒计时-;} setTimeout(function(){ settime(that)}，1000 )}Page({ /** *页面的初始数据*/data : { CodeScanclick : true }，/** *点击验证码按钮*/点击代码：函数(){ var=this设置时间，总结

以上所述是小编给大家介绍的微信小程序项目实践之验证码倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！