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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
js的回调函数详解
Jan 05 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
VUE长按事件需求详解
Oct 18 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
ES6 解构赋值的原理及运用
May 25 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开发文档 会员收费1期
2012/08/14 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS跨域总结
2012/08/30 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
活动总结报告怎么写
2014/07/03 职场文书
找工作求职信
2014/07/07 职场文书
2015年植树节活动总结
2015/02/06 职场文书
活动简报范文
2015/07/22 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
Python中22个万用公式的小结
2021/07/21 Python