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

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. Google chrome浏览器中通过扩展调用本地应用程序以及和程序相互通讯(C++)

    最近项目用到浏览插件的开发,IE用到的是BHO,chrome打算做成扩展. 但是和ie有一点不同,chrome扩展是基于html+js+css开发的,那么就会有二个问题 1. 代码和算法等容易被别人复 ...

  2. Docker-v17 的层级（layer）概念

    html,body { font-size: 12pt } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...

  3. WPF DataTriger 用法示例代码

    用法1: <DataGridTemplateColumn Header="{lex:LocText ExamineRoom}"> <DataGridTemplat ...

  4. Spring-Security+Freemarker 开启跨域请求伪造防护功能

         CSRF简介--摘抄自<Spring实战(第4版)> 我们可以回忆一下,当一个POST请求提交到"/spittles"上时,SpittleController ...

  5. js内存泄露的原因

    1.意外的全局变量 function fun(){ a=19//全局变量 console.log(a) } 2.未及时清理计时器或者回调函数 //记得及时清理定时器 var intervalId=se ...

  6. vue——安装并新建项目

    一.对于vue的安装: 1.安装vue之前先安装node,https://nodejs.org/zh-cn/download/,我装的是windows64位的: 2.下载好了之后就可以按照正常顺序安装 ...

  7. Centos下Sphinx的下载与编译安装

    官方下载地址   http://sphinxsearch.com/downloads/release/ 百度云下载地址  https://pan.baidu.com/s/1gfmPbd5 wget  ...

  8. python——Django项目模板

    views.py # -*- coding: utf-8 -*- from __future__ import unicode_literals from django.shortcuts impor ...

  9. 《精通android网络开发》--使用Socket实现数据通信

    No1: 网络传输应用通常使用TCP.IP或UDP这三种协议实现数据传输.在传输数据的过程中,需要通过一个双向的通信连接实现数据的交互.在这个传输过程中,通常将这个双向链路的一端称为Socket,一个 ...

  10. Flask下载文件

    前言 由于最近在做文件管理模块的功能,所以难免会遇到文件上传下载这块的功能.不过文件上传那块是调用的OSS api,所以接触的不多. 文件的下载: 1. 接口返回真实的文件 这种情况比较简单, fla ...