发送验证码60s倒计时实现
实现 发送 验证码 倒计时
2023-09-14 08:57:25 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown = 60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value="免费获取验证码"; countdown = 60; return; } else { obj.setAttribute("disabled", true); obj.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) } ,1000) } </script> </body> </html>
这个只是一种比较简单的实现方式(页面刷新就会失效,不过还有一种无视页面刷新的)
<input id="second" type="button" value="免费获取验证码" />
//发送验证码时添加cookie function addCookie(name,value,expiresHours){ var cookieString=name+"="+escape(value); //判断是否设置过期时间,0代表关闭浏览器时失效 if(expiresHours>0){ var date=new Date(); date.setTime(date.getTime()+expiresHours*1000); cookieString=cookieString+";expires=" + date.toUTCString(); } document.cookie=cookieString; } //修改cookie的值 function editCookie(name,value,expiresHours){ var cookieString=name+"="+escape(value); if(expiresHours>0){ var date=new Date(); date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒 cookieString=cookieString+";expires=" + date.toGMTString(); } document.cookie=cookieString; } //根据名字获取cookie的值 function getCookieValue(name){ var strCookie=document.cookie; var arrCookie=strCookie.split("; "); for(var i=0;i<arrCookie.length;i++){ var arr=arrCookie[i].split("="); if(arr[0]==name){ return unescape(arr[1]); break; }else{ return ""; break; } } }
主要逻辑代码
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//获取cookie值
if(v>0){
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,backFunc,queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,// 请求的action路径
data:queryParam,
error : function() {// 请求失败处理函数
},
success : backFunc
});
}
function backFunc1(data){
var d = $.parseJSON(data);
if(!d.success){
alert(d.msg);
}else{//返回验证码
alert("模拟验证码:"+d.msg);
$("#code").val(d.msg);
}
}
//开始倒计时
var countdown;
function settime(obj) {
countdown=getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("免费获取验证码");
return;
} else {
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+1);
}
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phonenum)){
alert('请输入有效的手机号码!');
return false;
}else{
return true;
}
}
参考链接:https://www.oschina.net/code/snippet_2001568_48311
相关文章
- 腾讯云短信服务实现 Java 发送手机验证码(SpringBoot+Redis 实现)
- java实现邮件发送功能_电子邮件是啥
- 一个神奇的需求:doc批量转docx,1行Python代码实现
- Jedis操作Redis实现模拟验证码发送功能
- Python实现简单的HTTP请求发送详解编程语言
- python实现发送邮件详解编程语言
- java实现发送邮件可多个附件内嵌图片-commons-email使用详解编程语言
- Java 基于JavaMail实现向QQ邮箱发送邮件详解编程语言
- java实现向服务端发送GET和POST请求详解编程语言
- CI(CodeIgniter)框架下使用非自带类库实现邮件发送详解编程语言
- MySQL数据库建模:实现高性能数据存储(mysql数据库建模)
- 求MySQL两列交集:实现方案及其性能(mysql求两列交集)
- 实例启动多个MySQL实例:一步一步实现(启动多个mysql)
- 邮件Linux 日志邮件发送实现方法(linux日志发送)
- Linux实现非阻塞recv函数,轻松高效的数据接收(linux非阻塞recv)
- 破解Oracle之锁:实现安全数据库访问(锁Oracle)
- Linux脚本实现邮件发送功能(linux脚本发邮件)
- 使用Linux发送UDP包:轻松实现高效网络通信(linux发udp包)
- 在RedHat上实现集群负载均衡系统
- 免费MySQL客户端:实现终端控制的强大功能(mysql+客户端+免费)
- 什么,如何使用dist函数实现数据去重MySQL中的DIST是什么,如何利用DIST函数实现数据去重呢快来了解几种使用DIST函数去重的方法吧
- 使用Redis队列实现邮件发送(redis 队列 邮件)
- 利用Redis实现队列机制的研究与应用(redis 队列应用场景)
- Redis队列实现数据一致性(redis队列保持一致性)
- 控制Redis实现版本控制设计与实现(redis设计与实现版本)
- .net发送邮件实现代码
- 纯CSS实现扑克牌效果
- PHPMailer邮件发送的实现代码