小程序设置发送验证码倒计时

这篇博客介绍了在前端页面中实现动态倒计时功能的方法,通过JavaScript的setInterval和clearInterval来控制倒计时,并展示了在获取验证码场景中的应用。当倒计时结束,按钮将解除禁用并重置为‘重新发送’状态。
摘要由CSDN通过智能技术生成
<button class="sends" 
bindtap="getVerificationCode" disabled='{{disabled}}'>{{time}}</button>

// pages/forget/forget.js
var interval = null //倒计时函数
Page({

    /**
     * 页面的初始数据
     */
      data: {
        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) { //倒计时等于0时解除定时器
            clearInterval(interval)//接除定时器
            that.setData({
              time: '重新发送',
              currentTime:61,
              disabled: false  //解除按钮禁用 
            })
          }
        }, 1000)//设置多久触发一次
      },
      getVerificationCode(){
        this.getCode();
        var that = this
        that.setData({
          disabled:true
        })
      },
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值