小程序验证码60秒倒计时

最新推荐文章于 2023-07-18 13:45:55 发布

原创最新推荐文章于 2023-07-18 13:45:55 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端 #javascript

笔记专栏收录该内容

113 篇文章

订阅专栏

本文介绍了一种在前端页面中实现验证码倒计时功能的方法。通过设置初始时间和禁用按钮的状态来控制用户获取验证码的行为，并使用 setInterval 实现了倒计时效果。当倒计时结束后，按钮将重新启用并允许用户再次获取验证码。

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

<button disabled="{{isClick}}" class="r_code" bindtap="getCountdown">{{timeCode}}</button>

 /**
     * 页面的初始数据
     */
    data: {
        navbarData: { // 组件所需的参数
            showCapsule: true, //是否显示左上角图标  
            capsuleType: 'return', // 左上角图标类型  / return
            title: '用户注册', //导航栏 中间的标题
        },
        timeCode: '获取验证码',
        currentTime: 61,  // 验证码倒计时秒数
        isClick: false, // 获取验证码是否能点击
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },
    /**
     * 获取验证码 倒计时60秒
     */
    getCode() {
        let that = this;
        let currentTime = that.data.currentTime
        let interval = setInterval(() => {
            currentTime = currentTime - 1
            that.setData({
                timeCode: currentTime + '秒'
            })
            if (currentTime <= 0) {
                clearInterval(interval)
                that.setData({
                    timeCode: '重新发送',
                    currentTime: 61,
                    isClick: false
                })
            }
        }, 1000)
    },
    /**
     * 点击 获取验证码
     */
    getCountdown() {
        let that = this;
        this.getCode();
        that.setData({
            isClick: true
        })
    },