首页 > 微信 > 详细

微信小程序发送验证码倒计时

时间:2020-05-14 23:08:32      阅读:102      评论:0      收藏:0      [点我收藏+]

wxml:  

 
     <view bindtap="dongtai" wx:if="{{send}}">
          <text>发送动态码</text>
        </view>
        <view wx:else>
          <text>{{seconds}}s后发送</text>
        </view>

js:

/**
   * 页面的初始数据
   */
  data: {
    // 发送按钮显示
    send:true,
    // 当前倒计时秒数
    seconds:"",
    // 总秒数
    max_seconds:5,
  },

/**
   * 发送验证码
   */
  dongtai:function(){
    var that=this;
    // 获取总秒数
    var seconds=this.data.max_seconds;
    this.setData({
      // 显示倒计时
      send:false,
      // 设置秒数
      seconds:seconds,
    })
    // 设置定时器
    var t=setInterval(function(){
      // 如果秒数小于0
      if(seconds<=0){
        // 停止定时器
        clearInterval(t);
        that.setData({
          // 显示发送按钮
          send:true,
        })
        // 停止执行
        return;
      }
      // 秒数减一
      seconds--;
      that.setData({
        // 更新当前秒数
        seconds:seconds,
      })
    },1000)
  },
 
 

微信小程序发送验证码倒计时

原文:https://www.cnblogs.com/haoming159/p/12891728.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!