小程序验证码倒计时

captcha.gif

公共函数 ./utils/timer.js

var length = 10;

function countdown(that) {
    console.log('count down');
    var seconds = that.data.seconds;
    console.log(seconds);
    var captchaLabel = that.data.captchaLabel;
    if (seconds <= 1) {
        captchaLabel = '获取验证码';
        seconds = length;
        that.setData({
            captchaDisabled: false
        });
    } else {
        captchaLabel = --seconds + '秒后重新发送'
    }
    that.setData({
        seconds: seconds,
        captchaLabel: captchaLabel
    });
}

module.exports = {
    countdown: countdown,
    length: length
}

前端调用

//index.js
//获取应用实例
var timer = require('../../utils/timer.js');
Page({
    data: {
        verifyCode: '', //6617
        captchaLabel: '获取验证码',
        seconds: timer.length,
        captchaDisabled: false
    },
    onLoad: function() {

    },
    captcha: function(e) {
        var param = {
            phone: this.data.phone
        };
        // 禁用按钮点击
        this.setData({
            captchaDisabled: true
        });
        // 立刻显示重发提示，不必等待倒计时启动
        this.setData({
            captchaLabel: timer.length + '秒后重新发送'
        });
        // 启动以1s为步长的倒计时
        var interval = setInterval(() => {
            timer.countdown(this);
        }, 1000);
        // 停止倒计时
        setTimeout(function() {
            clearInterval(interval);
        }, timer.length * 1000);

        if (this.data.seconds == timer.length) {
            console.log('post');
            wx.showToast({
                title: '发送成功'
            });
        }
    },

})

页面布局

<form bindsubmit="regist">
    <view class="input-container">
        <input type="text" name="verifyCode" placeholder="验证码" value="{{verifyCode}}" />
        <button class="captcha" bindtap="captcha" disabled="{{captchaDisabled}}" plain="true" disabled-class="disabled">{{captchaLabel}}</button>
    </view>
</form>

源码下载：https://gitee.com/dotton/demo-wx

praise mp