• js 获取验证码倒计时


    1 html 部分

    {{ btntext }}

    2 js 部分

    export default {
            data() {
                return {
                    disabled:false,
                    phone:'',
                    code:'',
                    btntext: '获取验证码',
                    timer: null,
                }
            },
            methods: {

            //获取验证码
                getCode(){
                    let reg = /^\d{11}$/
                    if (!this.phone || !reg.test(this.phone)) {
                        this.tips('请输入正确手机号码');
                        return;
                    } else {
                        let params = {
                            phone: this.phone,
                        }
                        this.countDown();//倒计时
                    }
                },

            //倒计时
                countDown(){
                    if (this.disabled) {
                        return false;
                    }
                    let second = 60; //1分钟倒计时
                    //不允许多次点击
                    this.disabled = true;
                    //倒计时
                    this.timer = setInterval(() => {
                        this.btntext = `${second}s可重发`;
                        second--;
                        if (second == 0) {
                            //1分钟后再次可以点击
                            this.disabled = false;
                            this.btntext = `重新获取`;
                            clearInterval(this.timer)
                        }
                    }, 1000);
                    this.yzm();
                    return true;
                },

    //获取验证码接口

            yzm(){

                  let par ={

                           phone:this.phone

                    }

                //接下来自己写请求接口

            }

            }

  • 相关阅读:
    简单记录下gin中使用中间件记录操作日志
    【Redis专题】Redis核心数据结构实战与高性能原理解析
    【闲聊杂谈】源码追踪Spring的三级缓存及循环依赖
    MAYA粒子基础_场
    Python实现fan茄小说内容下载
    基于C语言的词法分析实验
    RabbitMQ详解
    Unity Shader第二章作业
    K8S 实用工具之一 - 如何合并多个 kubeconfig?
    k8s驱逐篇(5)-kube-controller-manager驱逐
  • 原文地址:https://blog.csdn.net/m0_65730686/article/details/126937945