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

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. Windows Azure Storage (25) Azure Append Blob

    <Windows Azure Platform 系列文章目录> 在笔者之前的文章中,我们介绍了Azure Blob 有两种:Block Blob和Page Blob. 在这里笔者介绍Blo ...

  2. vscode php跳转

    最近在写一个php项目,最后选定使用vscode编辑器,然后研究了一下断点调试.格式代码.点击跳转 以下是配置步骤,记录一下 1.代码格式化及跳转  1.前提条件:安装7.0以上版本php,     ...

  3. shiro权限控制的简单实现

    权限控制常用的有shiro.spring security,两者相比较,各有优缺点,此篇文章以shiro为例,实现系统的权限控制. 一.数据库的设计 简单的五张表,用户.角色.权限及关联表: CREA ...

  4. canvas常用api

    1. 在canvas标签中给出长宽(不带单位):<canvas width="600" height="600"></canvas> 或 ...

  5. centos 环境变量配置

    CentOS系统下如何将PHP和mysql命令加入到环境变量中,在Linux CentOS系统上 安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到 ...

  6. url路径去掉两个opencms

    采用刚刚的方法安装OpenCMS之后,站点url中会存在两个opencms,造成访问url路径过长,下面讲解一种去掉两个opencms的方法. 1.去掉第一个opencms 安装时采用ROOT安装,即 ...

  7. spring core 与 context理解

    Spring core是核心层,拥有这BeanFactory这个强大的工厂,是所有bean的管理器: 而spring context是上下文运行环境,基于spring core之上的一个架构, 它之上 ...

  8. Activt工作流数据库对应表的作用

    1.资源库流程规则表 1)       act_re_deployment 部署信息表 2)       act_re_model                流程设计模型部署表 3)       ...

  9. 1.3 fractions模块

    数学世界中,浮点数还可以用分数形式展示,不可约简的分数形式往往更简洁直观.  问题来了,Python中如何输出不可约简的分数形式呢?  答案:用Fraction类来实现.这个类属于标准库的fracti ...

  10. CodeForces - 788B Weird journey 欧拉路

    题意:给定n个点,m条边,问能否找到多少条符合条件的路径.需要满足的条件:1.经过m-2条边两次,剩下两条边1次  2.任何两条路的终点和起点不能相同. 欧拉路的条件:存在两个或者0个奇度顶点. 思路 ...