Caso de cuenta atrás SMS

función objetivo

Aquí Insertar imagen Descripción
Después de hacer clic en Enviar, usted tiene que esperar cinco segundos para hacer clic de nuevo

la implementación del código

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <input type="text" name="" id="">
  <button>发送验证码</button>

  <script>
    var myIpt = document.querySelector('input');
    var myBtn = document.querySelector('button');

    myBtn.addEventListener('click', function () {
      var limitTime = 5;
      this.disabled = true;
      
      changeText(); //同倒计时案例,先手动调用一次,避免等待
      var timer01 = setInterval(changeText, 1000);

      function changeText() {
        if (limitTime <= 0) {
          myBtn.disabled = false;
          myBtn.innerHTML = '发送验证码';
          clearInterval(timer01); //定时器完成任务后,需要清除
        } else {
          myBtn.innerHTML = '请等待' + limitTime + '秒';
          limitTime--;
        }
      }
    });
  </script>
</body>

</html>
Publicados 135 artículos originales · ganado elogios 0 · Vistas 3096

Supongo que te gusta

Origin blog.csdn.net/qq_35764106/article/details/105179375
Recomendado
Clasificación