JS短信倒计时案例

最新推荐文章于 2024-11-02 19:19:35 发布

伐木累!

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量276

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46811890/article/details/133557170

版权

HTML表单中，当用户点击获取验证码按钮，JavaScript控制按钮状态和显示剩余秒数，实现输入验证和计时功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<!-- 案例分析：
1. 按钮点击之后，会变成禁用状态(disabled为ture)
2. 同时按钮里面的内容会变化,button里面的内容通过innerHTML修改
3. 按钮中的秒数发生变化，因此需要用到定时器
4. 定义一个变量，在定时器里面，不断递减
5. 如果变量为0说明到了时间，需要停止定时器，并且复原按钮初始状态 -->

<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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    span {
      font-size: 10px;
    }

    input {
      width: 130px;
      height: 15px;
      margin-left: 20px;
      font-size: 10px;
      color: #999;
    }

    button {
      width: 80px;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <input type="text" placeholder='请输入手机号' id="tele">
  <button>获取验证码</button>
  <script>
    // 获取元素
    var input = document.querySelector('#tele');
    var btn = document.querySelector('button');
    // 注册事件
    input.addEventListener('focus', function () {
      this.style.color = '#000';
    })
    var time = 60;  // 定义剩余秒数
    btn.addEventListener('click', function () {
      var tele = input.value;
      if (tele.length != 11) {  //判断输入框内容的长度是否为11位
        input.value = '手机号输入有误！'; //如果输入有误，则输入框以红色文本提示错误
        input.style.color = '#ff0000';
        setTimeout(function () {  // 设置定时器，在给出输入错误的提示1s后恢复原始输入状态
          input.value = tele;
          input.style.color = '#000';
        }, 1000)
      } else {
        this.disabled = true; // 手机号输入正确，则按钮变为禁用状态，并设置定时器
        var timer = setInterval(function () {
          if (time == 0) {
            // 清除定时器和复原按钮
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = '获取验证码';
            time = 60;  // 每次点击都需要重新开始计时
          } else {
            btn.innerHTML = '剩余' + time + '秒';
            time--;
          }
        }, 1000);
      }
    }
    )
  </script>
</body>

</html>