• 使用定时器限制点击按钮发送短信(附源码)--JavaScript小案例


    不说多哈,有注释哦,直接贴代码了哈,有疑问请追评呢……

    1、禁用按钮:

    this.disabled = "disabled"(this指按钮)或:

    this.disabled = true;

    2、this代表的含义

    this:事件的调用者或函数的使用者

    3、程序代码

    demo.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      <input type="text"/>
      <button id="btn">点击发送短信</button>
    </body>
    <script>
      var btm = document.getElementById("btn");
      var count =10;
      var timer = null;//不要用timer = 0,定时器和数字没有关系
      btn.onclick =function () {
        clearInterval(timer);
        this.disabled = "disabled";//this.disabled = true或者按钮不可以用,函数事件的调用者,也就是btn
        var _this=this;//也可以这样写var that=this;
        timer = window.setInterval(sendTextMessage,1000);//开启定时器
      function sendTextMessage() {
        count--;
        if(count >=0) {
          _this.innerHTML = "还剩" + count + "秒";// 如果用this.innerHTML = "还剩10s",this在这里指向定时器,一般用this,用btn的话,按钮多了就出问题了
    //button是双标签,双标签用innerHTML,单标签用value
        }else{
          _this.innerHTML = "重新发送短信";
          _this.disabled = false;
          clearInterval(timer);//clearInterval(定时器名称)
          count = 10;
          }
        }
    }
    //this:事件的调用者或函数的使用者
    </script>
    </html>

    Effect Picture:

     

    源码文件下载:使用定时器限制点击按钮发送短信.zip

  • 相关阅读:
    四则运算C语言程序
    雅思听听app
    What is 软件工程
    Python(Head First)学习笔记:六
    Python(Head First)学习笔记:五
    Python(Head First)学习笔记:四
    Python(Head First)学习笔记:三
    Python(Head First)学习笔记:二
    Python(Head First)学习笔记:一
    一名前端Web架构师的成长之路(转载)
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7667202.html
Copyright © 2020-2023  润新知