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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python写的一个文本编辑器
2014/01/23 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
python 图片去噪的方法示例
2019/07/09 Python
Python 私有化操作实例分析
2019/11/21 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
销售人员个人求职信
2013/09/26 职场文书
大学生就业意向书
2015/05/11 职场文书
南京大屠杀观后感
2015/06/02 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python