超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码
实现点击“发送验证码”按钮后，按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .
第一步、获取按钮、绑定事件、设置定时器变量和计时变量
第二步、添加定时器，每隔1秒钟计时减 1，直至当计时小于等于 0 时清除定时器，按钮恢复为“发送验证码”，否则显示为“X秒后重试”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send'),
times=60,
timer=null;
send.onclick=function(){
// 计时开始
var that = this;
this.disabled=true;
timer = setInterval(function(){
times --;
that.value = times + "秒后重试";
if(times <= 0){
that.disabled =false;
that.value = "发送验证码";
clearInterval(timer);
times = 60;
}
//console.log(times);
},1000);
}
}
</script>
</head>
<body>
<input type="button" id="send" value="发送验证码">
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
设置按钮是否为禁用时，send.disabled=true; send.disabled=false;
true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。
也可用send.setAttribute('disabled','disabled');
或send.removeAttribute('disabled');- 1
- 2
- 3
- 4
转载：http://blog.csdn.net/i10630226/article/details/49531083
超实用的JavaScript代码段 Item4 --发送短信验证码的更多相关文章
- 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...
- java 阿里云接口实现发送短信验证码
此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册 已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...
- Java 实现手机发送短信验证码
Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...
- Yii2发送短信验证码完全解决方案
概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...
- 阿里云短信服务发送短信验证码（JAVA开发此功能）
开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...
- Python3实现发送邮件和发送短信验证码
Python3实现发送邮件和发送短信验证码 Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email. ...
- day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码
目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...
- java实现发送短信验证码
java实现短信验证码发送 由于我们使用第三方平台进行验证码的发送,所以首先,我们要在一个平台进行注册. 在这里我选择是秒嘀科技,因为新人注册会赠送十元,足够测试使用了. 注册完成后,我们需要获取自己 ...
- Laravel5中使用阿里大于(鱼)发送短信验证码
在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...
随机推荐
- 【转】Haproxy安装及配置
1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.t ...
- SQL——连接查询
以mysql为例: 新建两张表table1和table2 CREATE TABLE `table1` ( `id` ) NOT NULL auto_increment, `name` ) defaul ...
- 10款Windows命令行工具
Windows下CMD不好用,远没有Linux,或者一些SSH工具用起来方便.其实Windows下,也有一些不错的工具替代CMD: 0.powercmd经过比较,我最终选择了这款,这里补充一下截图:
- C#垃圾回收机制(GC)
GC的前世与今生 虽然本文是以.net作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...
- shell script针对参数已经有配置好变量名称
/path/to/scriptname opt1 opt2 opt3 opt4 $ $ $ $ $ 这样够清楚了吧?运行的脚本档名为 $0 这个变量,第一个接的参数就是 $1 啊- 所以,只要我们在 ...
- Codeforces Round #199 (Div. 2)
A.Xenia and Divisors 题意:给定N个数,每个数的取值范围为1-7,N是3的倍数,判定是否能够恰好将N个数分成若干三元组,使得一个组中的元素a,b,c满足 a < b < ...
- MyISAM与InnoDB的索引实现
1.MyISAM 使用B+Tree 作为索引结构,叶子节点的data存放指针,也就是记录的地址.对于主键索引和辅助索引都是一样的.2.InnoDB 也使用B+Tree作为索引结构,也别需要注意的是,对 ...
- django的安装和搭建
一.先下载pyton,配置下python的环境变量,这个很重要,然后下载django,解压到与python同一个根目录底下,进入django目录,运行python setup.py install安装 ...
- Data Deduplication in Windows Server 2012
https://blogs.technet.microsoft.com/filecab/2012/05/20/introduction-to-data-deduplication-in-windows ...
- C语言语法之占用字节
指针占用字节 指针即为地址,存的是变量的地址,在同一架构下地址长度都是相同的(cpu的最大寻址内存空间),所以不同类型的指针长度都一样. 指针占用几个字节跟语言无关,而是跟系统的寻址能力有关,16为地 ...