JS实现简单短信验证码界面
更新时间：2017年08月07日 16:07:39 作者：m0_38056893
要实现短信验证码界面，首先要有一个文本框，旁边是按钮，点击时开始倒计时。接下来通过本文给大家分享js实现简单短信验证码界面，感兴趣的朋友参考下吧
1.要实现短信验证码界面，首先要有一个文本框，旁边是按钮，点击时开始倒计时。
2.先创建文本框和按钮，按钮设置对应的id，然后在js中通过id获取按钮这个元素，对其执行操作。同时应设置倒计时时间以及计时器变量，并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送。
3.倒计时结束后，清除计时器，并使文字改变为“重新发送验证码”，恢复对按钮能操作的功能，同时使倒计时的数从5秒重新开始以便点击后重新倒计时。
<head>
<meta charset="UTF-8">
<title>js发送短信验证码</title>
</head>
<body>
<input type="text"/><button id="bt01">发送验证码</button>
</body>
<script type="text/javascript">
var bt01 = document.getElementById("bt01");
bt01.onclick = function() {
bt01.disabled = true; //当点击后倒计时时候不能点击此按钮
var time = 5; //倒计时5秒
var timer = setInterval(fun1, 1000); //设置定时器
function fun1() {
time--;
if(time>=0) {
bt01.innerHTML = time + "s后重新发送";
}else{
bt01.innerHTML = "重新发送验证码";
bt01.disabled = false; //倒计时结束能够重新点击发送的按钮
clearTimeout(timer); //清除定时器
time = 5; //设置循环重新开始条件
}
}
}
</script>
总结
以上所述是小编给大家介绍的JS实现简单短信验证码界面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
2006-09-09
“眼睛跟随鼠标转动效果”—— 265.com 把它放在网页的LOGO里，用javascript来实现，这个创意不错！ 以前刚做FLASH的时候，用AS1实现过，今天下班早，在家简写了个：2008-02-02
字符串和数字的操作在js中非常频繁，也非常重要。以往看完书之后都能记得非常清楚，但稍微隔一段时间不用，便会忘得差不多，记性不好是硬伤啊。下面这篇文章就对字符串和数字的一些常用操作做个整理，一者加深印象，二者方便今后温习查阅。需要的朋友们可以参考借鉴。2017-01-01
javascript 随机抽奖程序代码,主要是利用了js的Math.random方法。需要的朋友可以参考下。2009-11-11
uni-app使用uniCloud实现图形验证码(uni-captcha)详细过程
这篇文章主要给大家介绍了关于uni-app使用uniCloud实现图形验证码(uni-captcha)的相关资料,实际开发工作中在登陆的时候经常需要图形验证码,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了基于Bootstrap3表格插件和分页插件实例详解的相关资料,需要的朋友可以参考下2016-05-05
在使用或开发小程序过程中,我们会发现消息通知是非常重要的一个环节,下面这篇文章主要给大家介绍了关于uniapp微信小程序订阅消息发送服务通知的相关资料,需要的朋友可以参考下2023-06-06
近期项目需要实现将 html 页面转换成 pdf 报告的需求,经过一番调研以及结合过往经验,发现了三种技术方案,下面我们就来看看它们的具体实现步骤吧2024-02-02
菜单上下显示的实现方法有很多,在本文将为大家介绍下使用js是如何实现的，需要的朋友不要错过2013-11-11
本文是对js中页面元素的几个用法进行了详细的总结介绍，需要的朋友可以 过来参考下，希望对大家有所帮助2013-11-11
最新评论