Vue发送验证码 60秒倒计时

最新推荐文章于 2024-09-26 14:22:46 发布

原创最新推荐文章于 2024-09-26 14:22:46 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的验证码重发功能，通过点击按钮启动计时器，倒计时结束后才能再次点击重发。此功能常用于防止频繁请求，减轻服务器负担。

通过点击当前按钮, 修改当前文字 `e.target.innerText`

在这里插入图片描述

<button @click="handleResend($event)">重新发送</button>

// 重发验证码
handleResend(e) {
      let time = 60;
      let timer = setInterval(function(){
        time--;
        e.target.innerText = "（"+time+"秒）重发";
        if(time === 0){
          clearInterval(timer);
          e.target.innerText = "重新发送";
        }
      },1000);
    },