发送短信实例

最新推荐文章于 2024-05-17 20:58:08 发布

哈哈哈333555

最新推荐文章于 2024-05-17 20:58:08 发布

阅读量345

点赞数 12

文章标签： javascript

本文链接：https://blog.csdn.net/sansheng333/article/details/134768360

版权

希望达到的效果:

在对应的文本框内容为空时不可以点击旁边的发送按钮
在发送一次短信后,在一定时间范围内不可以点击发送按钮,按钮里的文字内容修改为剩余时间

对应的代码编写:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>发送短信案例</title>
  </head>

  <body>
    手机号码： <input type="number" /> <button>发送</button>
    <script>
      //1.获取元素对象
      let btnEle = document.querySelector("button");
      let inEle = document.querySelector("input");
      // 2.绑定事件
        btnEle.onclick = function () {
        let Time = 4000;
        let timer;
        if (inEle.value.length > 0 && Time != 0) {
          btnEle.disabled = true;
          timer = setInterval(function () {
            btnEle.innerHTML = "剩余时间" + Time / 1000;
            console.log(Time);
            Time = Time - 1000;
            if (Time < 0) {
              clearTimeout(timer);
              btnEle.innerHTML = "发送";
              btnEle.disabled = false;
            }
          }, 1000);
        }
      };
    </script>
  </body>
</html>

上述图像是对应上述代码得到的结果,可以发现存在问题,忽视了在对应文本框没有内容时应该禁用发送按钮,代码的结构也可以修改的更加精简

针对问题修改:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>发送短信案例</title>
  </head>

  <body>
    手机号码： <input type="text" /> <button disabled>发送</button>
    <script>
      //1.获取元素对象
      let btnEle = document.querySelector("button");
      let inEle = document.querySelector("input");
      let num = 60; //倒计时时间;计数器
      // 2.绑定事件
      //blur---失去高亮
      inEle.addEventListener("blur", function () {
        //如果输入框的值为空,按钮禁用,否则启用
        if (this.value) {
          //this.value中没有内容时,输出null,转换为false
          btnEle.disabled = false; //启用
          btnEle.addEventListener("click", function () {
            let t = setInterval(function () {
              num--;
              btnEle.innerText = num + "秒后重新发送";
              if (num < 0) {
                btnEle.innerText = "发送";
                num = 60; //重置计数器
                btnEle.disabled = false;
                clearInterval(t); //停止计时器
              }
            }, 1000);
          });
        } else {
          btnEle.disabled = true; //禁用
        }
      });
    </script>
  </body>
</html>

修改后的代码对应前面有两点不同: