验证码倒计时

最新推荐文章于 2024-07-15 10:48:46 发布

冷色系微风爱丶

最新推荐文章于 2024-07-15 10:48:46 发布

阅读量118

点赞数

分类专栏： html

html 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title> 手机验证码 </title>
    <meta charset="utf-8" />
</head>

<style>
    a{
        color:red;
    }
    .disable{
        pointer-events:none;
        color:#666;
    }
</style>

<body>
    <p>
        <input type="text" placeholder="请输入手机号">
    </p>
    <p>
        <input type="text" placeholder="验证码">
        <a href="javascript:;" id="btn">发送验证码</a>
    </p>


    <script type="text/javascript">
        var oBtn = document.getElementById('btn');
        var flag = true;

        oBtn.addEventListener("click", function () {
            var time = 10;
            oBtn.classList.add('disable');
            oBtn.innerText = '已发送';

            if (flag) {
                flag = false;
                var timer = setInterval(() => {
                    time--;
                    oBtn.innerText = time + ' 秒';
                    if (time === 0) {
                        clearInterval(timer);
                        oBtn.innerText = '重新获取';
                        oBtn.classList.remove('disable');
                        flag = true;
                    }
                }, 1000)
            }
        });

    </script>
</body>

</html>

<button type="button" class="feachBtn">获取验证码</button>

// 点击获取验证码操作
  $('.feachBtn').click(function() {
    let count = 60;
    const countDown = setInterval(() => {
      if (count === 0) {
       $('.feachBtn').text('重新发送').removeAttr('disabled');
       $('.feachBtn').css({
        background: '#ff9400',
        color: '#fff',
       });
       clearInterval(countDown);
      } else {
       $('.feachBtn').attr('disabled', true);
       $('.feachBtn').css({
        background: '#d8d8d8',
        color: '#707070',
       });
       $('.feachBtn').text(count + '秒后可重新获取');
      }
      count--;
     }, 1000);
    }
  });