zoukankan      html  css  js  c++  java
  • 使用定时器限制点击按钮发送短信(附源码)--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

  • 相关阅读:
    关闭webstorm自动保存,并显示文件未保存标识
    ionic1.3.3 下拉刷新 上拉加载更多
    纯css导航下划线跟随效果【转载】
    wpf获取模板化控件中的动画。
    wpf中dropdownButton控件下拉居中。。。
    C#综合揭秘——深入分析委托与事件
    反射
    多线程,异步
    wcf,socket,数据传输方式
    面向对象五大原则三个基本特征
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7667202.html
Copyright © 2011-2022 走看看