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

wxml

js

data:{
    disabled: false,code: '获取验证码',},goGetCode:function(){
    var that = this;
    var time = 60;
    that.setData({
      code: '60秒后重发',disabled: true
    })
    var Interval = setInterval(function() {
      time--;
      if (time>0){
        that.setData({
          code: time + '秒后重发'
        })
      }else{
        clearInterval(Interval);
        that.setData({
          code: '获取验证码',disabled: false
        })
      }
    },1000)
}

wxss

button{  
  width:260rpx;
  height:80rpx; 
  padding: 10rpx 0;
  color: #000;
  line-height: 50rpx; 
  font-size: 32rpx;
  color: #fff;
  background: green;
} 
button[disabled]:not([type]){
 background: red; 
  color: #fff;   
}

wxml

js

data:{
    disabled: false,1000)
}

wxss

button{  
  width:260rpx;
  height:80rpx; 
  padding: 10rpx 0;
  color: #000;
  line-height: 50rpx; 
  font-size: 32rpx;
  color: #fff;
  background: green;
} 
button[disabled]:not([type]){
 background: red; 
  color: #fff;   
}

主看部分wxml

全部

     
    </code></pre>
<h3 id="需求验证获取倒计时">需求验证获取倒计时</h3>
<h4 id="点击获取验证码变成倒计时">点击获取验证码变成倒计时</h4>
<h4 id="解决方法">解决方法</h4>
<ul>
<li>1、先用一个变量把（list[2].btn）用字符串拼接起来</li>
<li>
<p>2、将变量写在[]里面即可</p>
<pre><code>  var btn = "list[" + 2 + "].btn"
  that.setData({
      [btn]: '60秒后重发',})</code></pre>
</li>
</ul>
<p><code>js</code></p>
<pre><code>Page({
    data:{
        list:[
         {
            type: 'input',star: '*',name: '您的姓名',placeholder: '请输入您的真实姓名'
          },{
            type: 'input',name: '联系方式',placeholder: '请输入您的手机号码'
          },name: '验证码',btn: '获取验证码',//倒计时
            placeholder: '请输入验证码'
          },name: '您的地址',placeholder: '请输入您的地址'
          },{
            type: 'textarea',name: '您的爱好',placeholder: '请输入您的爱好'
          },name: '您的年龄',placeholder: '请输入您的年龄'
          },name: '留言备注',placeholder: '请输入您的留言信息'
          }
        ],disabled: false
<pre><code>},getCode: function () {
    var that = this;
    var time = 60;    
    var btn = "list[" + 2 + "].btn"
    that.setData({
      [btn]: '60秒后重发',disabled: true
    })
    var interval = setInterval(function () {
      time--;
      if(time>0){
        that.setData({
          [btn]: time+'秒后重发'
        });
      }else{
        clearInterval(interval);
        that.setData({
          [btn]: '获取验证码',disabled: false          
        });
      }
    },1000)
  },getVerificationCode() {
    var that = this
    that.getCode();   

  }</code></pre>
<p>})</code></pre></p>
<p><code>wxss</code></p>
<pre><code>.star {
  display: inline-block;
  width: 10px;
  height: 100%;
  padding-right: 10rpx;
  font-size: 34rpx;
  color: #c21227;
}
.pos-row {
  position: relative;
  display: inline-block;
  width: 70%;
}
.input,textarea {
   width: 95%; 
  height: 66rpx; 
  border: 1px solid #000;
  border-radius: 8rpx;
  padding-left: 20rpx; 
  box-sizing: borde-box; 
  font-size: 28rpx;
  resize: none;
}
.special {
  width: 60%;
  height: 66rpx; 
  border: 1px solid #000;
  border-radius: 8rpx;
  padding-left: 20rpx; 
  margin-right: 10rpx;
  box-sizing: borde-box; 
  font-size: 28rpx;
  resize: none;
  /* text-overflow:clip;
  overflow:hidden;
  white-space:nowrap; */
}
textarea {
  width: 100%;
  height: 100rpx;
  padding: 16rpx 20rpx;
  box-sizing: border-box;
}
.group-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
  width: 50%;
  height: 35px;
 background: #f56730; 
  color: #fff;
  font-size: 28rpx;
  margin:0;
}
.group-btn[disabled]:not([type]){
 background: #f56730; 
  color: #fff;   
}
.from-btn {
  position: absolute;
  bottom: 0; 
  width: 100%;
  height: 70rpx;
  box-sizing: border-box;
  padding: 20px 40rpx 0;
}</code></pre>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/258116.html" target="_blank">微信小程序实现登录页云层漂浮的动画效果</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/277873.html" target="_blank">前端自动化grunt轻松入门</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/262188.html" target="_blank">sublimetext2 – 如何在Sublime Text 2中编辑本机构建系统？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243975.html" target="_blank">Web项目中的Java EE模块依赖关系？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/249900.html" target="_blank">单选按钮 – MVC 5 RadioButtonFor枚举,始终选择默认的枚举</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/263164.html" target="_blank">如何清除org-mode html导出中的页脚详细信息？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/247989.html" target="_blank">利用 Webpack 实现小程序多项目管理</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/257450.html" target="_blank">微信小程序getPhoneNumber获取用户手机号</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/244830.html" target="_blank">html – jekyll怎么判断是页面还是帖子？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/269860.html" target="_blank">javascript  –  Mailchimp一个列表的多个订阅表单</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243824.html" target="_blank">html – 在AngularJS中,我如何选择在链接中包装项</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/263615.html" target="_blank">“无法加载App_Web _ * dll”ASP.NET编译和回收后</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/251531.html" target="_blank">html – 关于UserComments模式的dtstart警告</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/261135.html" target="_blank">在动态添加dart聚合物元素时,如何在DOM上获取可观</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/257171.html" target="_blank">微信小程序使用radio显示单选项功能【附源码下载</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/269623.html" target="_blank">javascript  – 在旋转饼图时创建交互式表格</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/268106.html" target="_blank">javascript  – 根据滚动位置突出显示链接</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/258716.html" target="_blank">微信小程序的动画效果详解</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243950.html" target="_blank">html – CSS选择孙子中的第一类？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/271111.html" target="_blank">html  – 我在线商店的SF Visual Search是什么东</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>