JS——实现短信验证码的倒计时功能（没有验证码，只有倒计时）
1、功能描述
当用户想要获取验证码时，就点击 免费获取验证码 ，然后开始倒计时，倒计时期间按钮文字为剩余时间x秒，且不可按状态，倒计时结束后，按钮更改为点击重新发送。
2、分析
必须用到定时器。按钮点击后，在定时器内做出判断。倒计时60秒，到0结束。
3、代码实现：
重点介绍：定时器在进行下一次倒计时之前，一定要清除一下，这样的话保证下一次定时器倒计时是正常的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.send{
width:250px;
margin:0 auto;
}
.send input{
display: block;
width:200px;
font:400 16px/30px "微软雅黑";
outline: none;
border: none;
}
.send button{
height:30px;
border: none;
outline: none;
font:400 16px/30px "微软雅黑";
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementsByTagName("button")[0];
button.innerText="免费获取验证码";
var timer=null;
button.onclick=function(){
clearInterval(timer);//这句话至关重要
var time=6;
var that=this;//习惯
timer=setInterval(function(){
console.log(time);
if(time<=0){
that.innerText="";
that.innerText="点击重新发送";
that.disabled=false; }else {
that.disabled=true;
that.innerText="";
that.innerText="剩余时间"+(time)+"秒";
time--;
}
},1000);
}
}
</script>
</head>
<body>
<div id="send">
<input type="text" name="in" id="in" value="" /><button></button>
</div>
</body>
</html>
JS——实现短信验证码的倒计时功能（没有验证码，只有倒计时）的更多相关文章
- iOS打电话、发短信、发邮件功能开发
本文转载至 http://www.lvtao.net/ios/506.html 今天把APP里常用小功能 例如发短信.发邮件.打电话.全部拿出来简单说说它们的实现思路. 1.发短信实现打电话的功能,主 ...
- Android 节日短信送祝福（功能篇：1-数据库操作类与自定义ContentProvider）
首先,还是展示一下部分目录结构: 在节日短信送祝福的功能实现方面,为了能够方便直观展示实现过程,小编我以Java文件为基础,一个一个来展示,免得到时候这个java文件写点,一下又跳到另外一个java ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
- day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...
- js手机短信按钮倒计时
/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name). ...
- js 发送短信倒计时、秒杀倒计时实现代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- JS发送短信验证码
<div> <input type="tel" id="mobile" name="mobile" placeholder ...
- flask+阿里云短信服务实现注册发送手机验证码
效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...
- Laravel实现大型商城网站之用户注册短信发送项目实战功能开发
确定短信运营商 我这里采用的云片,不过大家使用其它的也可以. 首先自己注册一个帐号,然后找到这个 点击开始接入,完成新手引导过程. 第二部的签名和模板必须填写,类似我下面填写的这样 值得注意的是这个模 ...
- 脚本控制向Android模拟拨打电话，发送短信，定位设置功能
做行为触发的时候要向模拟器实现拨打电话,发送短信,定位设置的的功能,可以很方便通过telnet localhost 5554实现. 写个脚本很快的搞定了.网上资料很多,脚本的很少,也所积点德啦. 写 ...
随机推荐
- [转]php 在各种web服务器的运行模式
一.php在apache中运行模式 php在apache中一共有三种工作方式:CGI模式.FastCGI模式.Apache 模块DLL) 以下分别比较: 1. CGI模式与模块模式比较: php在ap ...
- Python 模块功能paramiko SSH 远程执行及远程下载
模块 paramiko paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来现 ...
- css 相关
background-size: auto就会变成就是不会让图像变形的,会自动调整,一般是会设置多少箱像素的, background-size: XXpx XXpx;百分百那就铺满整个区域了 back ...
- SQL 合并列值和拆分列值
合并列值 表结构,数据如下: id value ----- ------ aa bb aaa bbb ccc 需要得到结果: id values ------ ----------- aa,bb aa ...
- 1.1 mysql安装
直接百度mysql 即可下载.. 下载完毕之后是压缩包,解压缩即可 解压之后可以将该文件夹改名,放到合适的位置,个人建议把文件夹改名为MySQL Server 5.6,放到D:\MySQL Serve ...
- asp网站中使用百度ueditor教程
1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...
- HUD 1541/BIT(数状数组)
题目链接 /* 按从左到右,从下到上的顺序给出星星的坐标,计算出level为[0,n)的星星的个数. 星星的level为该星星左下边(包括自己正下方的星星,但是不包括自己)星星的个数. BIT模板题. ...
- RatingBar
题记:保持旺盛的求知欲.希望会一直这样. 说明:来了新控件了.就是经常用的打分的那种东东. 说明:1.看上图分别是系统自带的和自己做的.rating就是设置小星星的数目. 2.用系统自带的必须是Wra ...
- robot framework -记录关键字
1.set value if (当条件满足时,进行变量赋值) 2.focus (将焦点定在制定的元素) 3.win close +title(关闭制定title) 4.get list items ...
- SonarQube代码质量管理平台比较好的搭建和使用资料
http://www.voidcn.com/blog/lidujun1028/article/p-3831235.html Sonar (SonarQube)是一个开源平台,用于管理源代码的质量. ...