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

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. Redis集群分布

    Redis系列 作者Mr.Chen,转载请注明博客出处:http://www.cnblogs.com/cjh-notes/ Redis集群存储 先看下架构图,下面说明其存储原理:首先redis每个节点 ...

  2. 移植cjson到windows下编译

    #起因 在工作过程中发现需要让Lua支持json库,如果直接用lua版本的json解析器的话效率不够高,所以找了一个用C实现的json库--cjson,据说此库比lua版本的效率高10-20倍.但是c ...

  3. Halcon一日一练:图像分辨率与像素

    1.图像像素: 像素是指由图像的小方格即所谓的像素(pixel)组成的,这些小方块都有一个明确的位置和被分配的色彩数值,而这些一小方格的颜色和位置就决定该图像所呈现出来的样子.像素是构成图像的基本单元 ...

  4. Java经典编程题50道之四十八

    某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. public ...

  5. Yii2框架RBAC(Role-Based Access Control)的使用

    1.在项目的common/config/main.php文件的components中添加如下代码:   'authManager' => [    'class' => 'yii\rbac ...

  6. wamp server环境下mysql数据库的密码为什么修改不了?

    每次这个控制台,不输入密码可以直接用,用root登录都登录不了.修改root密码也修改不了.困惑? 经过不断的尝试终于找到解决的办法: 1,在mysql的配置文件my.ini的末尾添加 skip-gr ...

  7. 安装git,gitlab和TortoiseGit

    全部都是默认配置安装 需注册用户:用户名尽量好认 测试用户: 注册成功: 生成密钥: 1.首先使用TortoiseGit自带的Puttygen创建本地的公/私钥对 2.点击Generate按钮,在窗口 ...

  8. python3.6+django2.0 一小时学会开发一套学员管理系统demo

    1.在pycharm中新建project demo1 添加app01 点击create按钮完成新建 2.在demo项目目录下新建目录static,并在settings.py中追加代码: STATICF ...

  9. nyoj737 石子合并(一) 区间DP

    dp[x][y]表示合并[x, y]区间的石子的最小花费,将区间长度递增枚举即可. AC代码: #include<cstdio> #include<algorithm> usi ...

  10. python技巧

    python小技巧: 1.强烈建议使用Python的r前缀,就不用考虑转义的问题了. 2.正则表达式的使用: test = '用户输入的字符串' if re.match(r'正则表达式', test) ...