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

  • 相关阅读:
    java-泛型及上界下界详解
    【CSDN】Spring+Spring MVC+Mybatis实战项目之云笔记项目
    mybatis
    spring笔记-spring mvc表单
    spring笔记-第一个spring mvc 项目
    巡风源码阅读与分析---AddPlugin()方法
    巡风源码阅读与分析---view.py
    BUGKUctf-web-writeup
    陕西省网络空间安全技术大赛部分题目writeup
    “百度杯”CTF比赛(二月场)-web-writeup
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7667202.html
Copyright © 2011-2022 走看看