JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)


Posted in Javascript onOctober 27, 2016

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短信验证码倒计时功能的实现(没有验证码,只有倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
微信小程序  modal弹框组件详解
Oct 27 #Javascript
从0开始学Vue
Oct 27 #Javascript
微信小程序  Mustache语法详细介绍
Oct 27 #Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
vue中渐进过渡效果实现
Oct 27 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP的FTP学习(三)
2006/10/09 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
js中DOM事件绑定分析
2018/03/18 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
降低python版本的操作方法
2020/09/11 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
房屋买卖委托公证书
2014/04/08 职场文书
总经理岗位职责说明书
2014/07/30 职场文书