小程序实战(十一)-验证码定时器

一、需求说明

1. 点击 获取验证码 后，按钮不可点击，并出现 xx 秒后重新获取
2. 从 60 秒开始计时

二、需求实现

2.1 HTML 代码

<button bindtap="getCode" disabled='{{btnDisabled}}>{{verifyBtnText}}</button>

2.2 设计 getCode 函数框架

getCode 函数需要做这么几件事： 1. 校验手机号是否正确 2. 开启倒计时 3. 调用获取验证码接口

getCode() {
    this.validatePhone()   // 校验手机号 代码省略
    countDown()     // 倒计时函数 详细代码见下
    post(api.getCode).then(res => {      // 调用接口	
    })
}

2.3 设计倒计时函数 countDown

倒计时函数需要做这么几件事： 1. 有一个变量 time 用来存储初始时间：60s 2. 当 time 值为 0 时，按钮可点击，并将 time 初始化 3. 当 time 值不为 0 时，按钮不可点击，将 time 减 1，并设置一个定时器，每秒调用一次 countDown 函数

var time = 60                                   // 定义初始时间变量
countDown() {
    let that = this
    if (time == 0) {
        that.setData({
            btnDisabled: false,
            verifyBtnText: '获取验证码'           // 按钮可点 设置按钮文本
        })
        time = 60			        // 初始化变量
    } else {
        that.setData({
            btnDisabled: true,
            verifyBtnText: time + 's后再次获取'	// 按钮不可点 设置按钮文本
        })
        time--			                // 时间自减 1
        setTimeout(() => {
            that.countDown()		        // 定时器 每秒调用自身
        })
    }
}

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~