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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 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实际应用经验篇(2)
2006/10/09 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Python全局变量操作详解
2015/04/14 Python
改进Django中的表单的简单方法
2015/07/17 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
详解python UDP 编程
2020/08/24 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
元旦晚会感言
2014/03/12 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
应届毕业生求职信
2014/05/26 职场文书
机关作风建设工作总结
2014/10/23 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript