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

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

使用定时器限制点击按钮发送短信(附源码)--JavaScript小案例的更多相关文章

  1. Android抢先截获短信(附源码)

    之前在写通讯录应用时,将整体的代码写完后,自测时发现非常非常多的问题,其中一个非常重要严重的就是可以发出短信,但收不到任何的短信息,这搞的我好捉鸡啊!后来调试发现是由于没有收到短信的消息导致的,然后将 ...

  2. 短信平台软件开发,短信发送平台销售,短信软件源码,G客短信发送平台

    一:web短信平台组成  需要短信软件平台源码的联系QQ:290615413 vx:290615413  整套短信系统平台还是由B/S(客户端+后台,取消了以前C/S的管理后台) ,C/S发送服务端和 ...

  3. 网页短信平台源码和开发功能介绍 思路和功能 G客短信平台

    G客短信源码介绍 (只介绍现有功能模块文字介绍配系统截图) 一:后台首页 ​ QQ:290615413 VX:290615413

  4. 完整的Android手机短信验证源码

    短信验证功能我分两个模块来说,短信验证码的后台和代码实现短信验证码的功能. 一.短信验证码的后台      1.注册Mob账号:http://www.mob.com/#/login 2.注册成功之后, ...

  5. 【mob】Android短信验证+源码

    在很多的应用当中,都涉及到了短信验证的功能,比如在注册或者找回密码的时候,那么我们如何通过第三方的平台来完成这个功能呢? 本面博文就实现短信验证,来做一个小的栗子. 第一步-下载开发包 第二步-将SD ...

  6. Android-看操作系统短信应用源码-隐式意图激活短信界面

    选择模拟器Unknown Google Nexus,在选择system_process(系统进程) 操作模拟器的,操作系统短信应用,让操作系统短信打印日志,来查看: 然后就找到来,操作系统短信应用打印 ...

  7. a标签的妙用-拨打电话、发送短信、发送邮件

    前端时间在做手机WAP网站时,遇到需要点击页面上显示的电话号能直接拨号的需求,查找资料发现可以使用html的a标签完美实现该需求!记录下来以备后用...... 目前主流手机浏览器对H5的支持已经很不错 ...

  8. Android中使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信

    场景 点击拨打电话按钮,跳转到拨打电话页面 点击发送短信按钮,跳转到发送短信页面 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程 ...

  9. WPF MVVM下做发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一 ...

随机推荐

  1. 用 k8s 运行一次性任务 - 每天5分钟玩转 Docker 容器技术(132)

    容器按照持续运行的时间可分为两类:服务类容器和工作类容器. 服务类容器通常持续提供服务,需要一直运行,比如 http server,daemon 等.工作类容器则是一次性任务,比如批处理程序,完成后容 ...

  2. qt中的udp编程

    UDP QUdpSocket ---> upd socket 1.创建 QUdpSocket *p = new QUdpSocket(); 2.最先接收数据一方 调用bind-> ip/p ...

  3. .net 远程调试

    1.我们在调试支付接口的时候很多情况下需要请求网关等,这时候需要在服务器上进行调试 首先找到服务器上的msvsmon文件,打开运行,得到对应的端口 然后打开vs,附加进程到远程地址加上端口,然后附加w ...

  4. JavaScript使用点滴

    JavaScript使用点滴 一.字符串替换的小插曲 遇到一个小插曲,想要把后台返回的字符串输出给前端视图,字符串中包含\n换行,需要使用javascript对其进行替换成<br />. ...

  5. ps色彩范围抠章

    1.在photoshop打开需要抠公章的图像文件2.使用椭圆形选区工具,ALT+SHIFT+鼠标左键,选择章的范围 2.CTRL+J,复制图层,得到图层1,隐藏背景 3.CTRL+L,调整色阶,拖动两 ...

  6. yml 文件操作方法

    文件读取方法示例: import yaml fr = open('yml_file_address', 'r',encoding='utf-8') data = yaml.load(fr) print ...

  7. JAVA受检异常和非受检异常举例

    受检异常和非受检异常(运行时异常)举例 RuntimeException(即非受检异常): RuntimeException在默认情况下会得到自动处理,所以通常用不着捕获RuntimeExceptio ...

  8. PHP结合Redis来限制用户或者IP某个时间段内访问的次数

    $redis = new Redis(); $redis->connect('127.0.0.1', 6379); //获取客户端真实ip地址 function get_real_ip(){ s ...

  9. nginx笔记4-负载均衡带来的问题以及解决办法

    接着笔记3,将笔记三的改造一下,现在分别启动两个Tomcat,在页面获取session.如图所示: tomcat2的session: tomcat1的session: 根据上图发现,每个tomcat取 ...

  10. 流处理与消息队列------《Designing Data-Intensive Applications》读书笔记16

    上一篇聊了聊批处理的缺点,对于无界数据来说,流处理会是更好的选择,"流"指的是随着时间的推移逐步增加的数据.消息队列可以将这些流组织起来,快速的在应用程序中给予反馈.但是消息队列与 ...