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

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. 浅析Xilinx 三速以太网MAC IP核

    之前在使用Altera的三速以太网MAC IP的基础上,完成了UDP协议数据传输.此次为了将设计移植到xilinx FPGA上,需要用到xilinx的三速以太网MAC IP核,当然也可以自己用HDL编 ...

  2. php 下载保存文件保存到本地的两种实现方法

    这里的下载,指的是 弹出下载提示框. 第一种: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php function downfile() {  $filename ...

  3. macbook air扩展显示器全屏滑动怎样不一起滑动?

    macbook air 外接了一个显示器(扩展),当我有多个桌面时,用手指滑动触控板切换桌面时,扩展屏幕也跟着切换桌面有什么办法能让我在切换主屏幕桌面的时候,扩展屏幕保持不动呢?上周还好好的,昨晚关机 ...

  4. 一起学微软Power BI系列-使用技巧(6) 连接Sqlite数据库

    好久没有研究Power BI了,看到高飞大神弄的东西,太惭愧了.今天有个小东西,数据在Sqlite里面,想倒腾到Power BI Desktop里面折腾一下,结果发现还不直接支持.所以只好硬着头皮上去 ...

  5. Invoke 与 BeginInvoke 应用场景

    1.委托中 Invoke , BeginInvoke 特点 Invoke  : 同步调用 , 委托在当前线程执行 BeginInvoke : 异步调用 , 通常使用线程池资源执行委托. 2. UI  ...

  6. css中的关于margin-top,position和z-index的一些bug解决方案

    这两天在写一个demo的时候,就碰到一些css的问题,不知道能不能算bug,很有可能是因为我写的代码太少,孤陋寡闻了_(:зゝ∠)_.记录一下,以防下次遇到同样问题. 进入正题: 1.问题描述:div ...

  7. ARM平台的虚拟化介绍

    本篇博文主要介绍虚拟化的基本思想以及在arm平台如何做虚拟化,arm提供的硬件feature等等. 虚拟化技术简介 虚拟化技术 虚拟化是一个概念,单从这个概念的角度来看,只要是用某一种物品去模拟另一种 ...

  8. RHEL6误安装RHEL7的包导致glibc被升级后系统崩溃处理方法

    RHEL6误使用了RHEL7的光盘源,安装了某个RPM包之后,导致glibc被升级,进而导致系统崩溃.   [root@rhel65 ~]# yum install ftp Loaded plugin ...

  9. 关于Devexpress15.2中GridControl控件选择字段ColumnEdit下拉时间设置

    效果:点击表格GridControl控件中的列,可以显示日期和时间.时间可以手动修改.(绑定日期格式的字段) 设置步骤:1.点击时间字段列表设置ColumnEdit-New-选择DateEdit出现r ...

  10. 阿里巴巴分布式服务框架 Dubbo 介绍

    Dubbo是阿里巴巴内部的SOA服务化治理方案的核心框架,每天为2000+ 个服务提供3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo自2011年开源后, ...