支付宝小程序短信倒计时

嘻嘻嘻嘻嘻喜喜

于 2019-12-06 17:41:30 发布

阅读量379

点赞数

分类专栏：支付宝小程序文章标签：支付宝短信倒计时

本文链接：https://blog.youkuaiyun.com/objectking/article/details/103427143

版权

支付宝小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在页面上实现验证码倒计时功能的方法，通过定义CountDown类，使用Promise进行时间控制，确保验证码在设定时间内不可重复请求。文章详细展示了如何在页面加载时初始化倒计时，并在点击事件中启动倒计时流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义方法

class CountDown {
  //captchaClickable是否允许点击
  constructor(page) {
    this.page = page;
    this.initSeconds = 60;
    this.page.setData({ captchaTxt: '获取验证码', captchaDisabled: false });
  }
  start() {
    // console.info('进入倒计时');
    var that = this;
    var seconds = that.initSeconds;
    that.page.setData({ captchaDisabled: true, captchaTxt: seconds+'秒'});
    let promise = new Promise((resolve, reject) => {
      let setTimer = setInterval(
        () => {
          seconds -= 1;
          // console.info('倒计时:' + seconds);
          that.page.setData({
            captchaTxt: seconds + '秒',
            captchaDisabled: true
          })
          if (seconds <= 0) {
            that.page.setData({
              captchaTxt: '获取验证码',
              captchaDisabled: false
            })
            resolve(setTimer)
          }
        }
        , 1000)
    })
    promise.then((setTimer) => {
      clearInterval(setTimer)
    })

  }
}
module.exports = CountDown;

页面引用

var CountDown = require('../../utils/countdown.js');

在Onload

 onLoad(query) {
    // 页面加载 
    this.countdown = new CountDown(this);
  },

事件点击事件时调用

that.countdown.start();

参考榛子云原文章下方

http://smsow.zhenzikj.com/bbs/question/detail/74.html