发送验证码60s倒计时实现

最新推荐文章于 2023-03-26 19:58:58 发布

Tit先生

最新推荐文章于 2023-03-26 19:58:58 发布

阅读量1.6k

点赞数 7

分类专栏：基础文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_43732592/article/details/109556675

版权

基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

发送验证码60s倒计时实现

<!DOCTYPE html>
<html lang="en">
		<head>
			<meta charset="UTF-8">
			/*这个只是一种比较简单的实现方式
			（页面刷新就会失效，不过还有一种无视页面刷新的）
			*/
			<title>发送验证码60s倒计时实现</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>

优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="second" type="button"  value="免费获取验证码"  />
		
		
		<script type="text/javascript">
			//发送验证码时添加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;
			    }
			}
		</script>
	</body>
</html>

Tit先生

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
发送验证码60s倒计时实现

发送验证码60s倒计时实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> /*这个只是一种比较简单的实现方式（页面刷新就会失效，不过还有一种无视页面刷新的） */ <title>发送验证码60s倒计时实现</title> </head><body> <input type=
复制链接

扫一扫