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

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. 📉 Draggable Curve Control (English)

    Conmajia 2012 Updated on Feb. 18, 2018 In Photoshop, there is a very powerful feature called Curve A ...

  2. pip install 提示"no previously-included directories found matching"及"no previously-included files matching found anywhere in distribution"，且偶发无法关联安装 PyPI 库的故障

    环境描述: Python 2.7.5 CentOS-7.2   报错现象: (1).在虚拟环境下运行 pip install 命令安装 PyPI 第三方库,出现类似如下告警. Running setu ...

  3. WPF项目学习.二

    WPF用MVVM的解决记录 版权声明:本文为博主初学经验,未经博主允许不得转载. 一.前言 记录在学习与制作WPF过程中遇到的解决方案.  焦点的控制,键盘事件触发,输入框的数字限制,异步处理,隐藏状 ...

  4. PHP中常用操作文件的方法

    文件夹的创建: mkdir系统函数,第一个参数是路径,第二个参数是权限,第三个参数是是否递归创建,默认权限是0777最大权限,在windows下没有所谓的权限,在linux下可以设置权限,如果目录存在 ...

  5. nodejs事件循环

    1. 只有一个主线程,node开始执行脚本时,会先进事件循环初始化(同步任务,发出异步请求,规划定时器生效时间,执行promise.nextTick等),这是事件循环还未开始. 2. nodejs每一 ...

  6. Python自动化--语言基础3--字典、函数、全局/局部变量

    字典 dict1 = {'name':'han','age':18,'class':'first'} print(dict1.keys()) #打印所有的key值 print(dict1.values ...

  7. mysql5.7中解决中文乱码的问题

    在使用mysql5.7时,会发现通过web端向数据库中写入中文后会出现乱码,但是在数据库中直接操作SQL语句插入数据后中文就显示正常,这个问题怎么解决呢?此处不对mysql的数据编码过程和原理进行讲解 ...

  8. eclipse中创建一个maven项目

    1.什么是Maven Apache Maven 是一个项目管理和整合工具.基于工程对象模型(POM)的概念,通过一个中央信息管理模块,Maven 能够管理项目的构建.报告和文档. Maven工程结构和 ...

  9. .NET平台开源项目速览(20)Newlife.Core中简单灵活的配置文件

    记得5年前开始拼命翻读X组件的源码,特别是XCode,但对Newlife.Core 的东西了解很少,最多只是会用用,而且用到的只是九牛一毛.里面好用的东西太多了. 最近一年时间,零零散散又学了很多,也 ...

  10. 《android开发进阶从小工到专家》读书笔记--网络框架的设计与实现

    第一步: 第一层:Request--请求类型,JSON,字符串,文件 第二层:消息队列--维护了提交给网络框架的请求列表,并且根据响应的规则进行排序.默认情况下按照优先级和进入队列的顺序来执行,该队列 ...