js简单实现获取验证码倒计时

基于vue来实现的

html部分

<div class="get-code" @click.stop="getCode">{{codeTxt}}</div>

js部分

export default {
    data(){
        isCodeIng:false,//是否倒计时
        codeTxt:'获取验证码',
    },
    methods:{
        getCode(){
            if(!this.isCodeIng){
                //获取验证码倒计时
                this.isCodeIng = true;
                let time = 60;
                let timer = setInterval(()=> {
                     time--;
                     this.codeTxt = '重新获取'+ time + 's';
                     if (time <= 0) {
                          this.codeTxt = '获取验证码';
                          this.isCodeIng = false;
                          clearInterval(timer);
                     }
                 }, 1000);
            }
        }
    }    
}
        

自己预留起来,以后用到可以直接使用

原文地址:https://www.cnblogs.com/chao202426/p/11969207.html