vue实现验证码倒计时——js定时函数的应用

kumababe

已于 2024-06-25 12:11:11 修改

阅读量191

点赞数 3

文章标签： javascript 前端 java

于 2024-06-25 12:02:02 首次发布

本文链接：https://blog.csdn.net/kumababe/article/details/139198846

版权

setTimeout()、setInterval()定时函数

实现的效果：

10秒后恢复成获取验证码

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现验证码倒计时</title>   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <div class="login-box">
        <h3 class="login-title">欢迎登录</h3>
        <form action="" id="login_Submit">
          <div class="alert-input">
            <div class="form-yzm form-border">
              <input class="yzm-write" type="text" placeholder="输入短信验证码">
              <input class="yzm-send" type="button" v-bind:value="yzmText" @click="codeButton" id="yzmBtn" >
            </div>
          </div>
        </form>

      </div>
        
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data () {
                return{
                   yzmText:'获取验证码',
                   isSend:false, 
                }
            },
            methods: {
              codeButton(){
              //倒计时只执行一次
              if (this.isSend == false){
            
                  this.isSend = true;

                  let btn = document.getElementById("yzmBtn");
                  let second = 10;

                  const intervalId = setInterval(()=>{
                    console.log(second);
                    btn.style.color = 'red';
                    second = second - 1;
                    btn.value = second + "秒后重新获取";
                    //this.yzmText = second + "秒后重新获取";
                  },1000)

                  // 10秒后停止定时器
                  setTimeout(() => {
                    clearInterval(intervalId); // 通过定时器ID停止定时器的执行
                    console.log('定时器已停止');
                    btn.value = "获取验证码";
                    btn.style.color = '#688EF9';
                    this.isSend = false;
                  }, 10*1000);
                }
              },
            }

        })
    </script>   
</body>
</html>

kumababe

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现验证码倒计时——js定时函数的应用

setTimeout()、setInterval()定时函数
复制链接

扫一扫