js实现发送短信验证码倒计时教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现发送短信验证码倒计时教程相关的知识，希望对你有一定的参考价值。
短信验证码倒计时可以很好的避免用户频繁的获取，通常采用js实现获取短信验证码倒计时功能，具体实现如下：
html部分：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.wrapper{
margin-top:20px;
margin-left:20px;
}
.sns-input{
float:left;
height:28px;
}
.sns-btn{
float:left;
border-radius:5px;
margin-left:10px;
cursor:pointer;
width:80px;
height:30px;
line-height:30px;
background-color:#1f7e9a;
font-size:16px;
color:#ffffff;
text-align:center;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="sns-input" id="snsCode">
<div class="sns-btn" id="snsBtn">发送</div>
</div>
</body>
</html>
页面效果：
js部分：
<script>
var btnDisable = false; //发送按钮是否禁用
var btn=document.getElementById("snsBtn"); //按钮dom对象
btn.onclick=function(){ //按钮点击事件
//防止等待期间执行发送
if(btnDisable){
return;
}
//1、执行请求验证码逻辑
//....
//2、设置定时器进行等等
timewait(60)
//3、恢复按钮可用
btnDisable = true;
}
function(time){
setTimeout(function(){
if(time>=0){
btn.innerHTML = time + "s后重试"；
time--;
timeWait(time);
}else{
btn.innerHTML = "发送"；
btnDisable = false;
}
},1000); //设置定时器
}
</script>
最终实现效果
本文转载之：http://www.lx598.com/hangyedongtai/1028.html
以上是关于js实现发送短信验证码倒计时教程的主要内容，如果未能解决你的问题，请参考以下文章