短信验证码---重新发送倒计时

最新推荐文章于 2024-05-15 01:54:03 发布

kenhins

最新推荐文章于 2024-05-15 01:54:03 发布

阅读量4.4k

点赞数 1

分类专栏： Javascript jQuery

本文链接：https://blog.csdn.net/kenhins/article/details/52457910

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

jQuery

40 篇文章 0 订阅

订阅专栏

参考代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<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> 
<input type="button" id="btn" value="免费获取验证码" οnclick="settime(this)" /> 
  
</body>
</html>

实践例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>抢占iPhone7专属预订名额</title>
		<link rel="stylesheet" href="getiphone.css" />
	</head>
	<body style="width: 100%;height: 100%;background:#fff url(iponeImg/beijing.png) no-repeat center fixed;background-size:100% 100%;text-align: center;">
		<div class="top">
			<img src="iponeImg/wenan.png" />			
		</div>			
		<h1 class="title"><span></span>上市时间同步发售<span></span><br />首批新苹果30个预订专属名额</h1>
		<form id="activityForm" class="form-horizontal" method="post" action="/wamei/activityController/save.htm">
			<label>
				<span><img src="iponeImg/yonghu.png" /></span>
				<i></i>
				<input type="text" class="inline-input" id="name" name="name" placeholder="请输入您的真实姓名" datatype="*1-20" errormsg="姓名最多20个中英文字符！" nullmsg="请输入您的真实姓名！" />
			</label>
			<label>
				<span><img src="iponeImg/dianhua.png" /></span>
				<i></i>
				<input type="text" class="inline-input" id="mobilePhone" name="mobilePhone" placeholder="请输入您的手机号码" datatype="*" errormsg="请输入您的手机号码！" nullmsg="请输入您的手机号码！" />
			</label>	
			<label>
				<span><img src="iponeImg/yanzhengma.png" /></span>
				<i></i>
				<input type="text" id="validateCode" class="inline-input" name="validateCode" placeholder="验证码"  datatype="*" errormsg="请输入验证码！"  nullmsg="请输入验证码！" style="width:180px;" />
				<a id="num" mark="1" >获取验证码</a>
			</label>
			<label id="get">
				<input id="confirm" type="submit" value="提交抢占名额" />
			</label>
			<label>
				<a href="/wamei/pages/activity/details.html" id="activity">查看活动详情</a>
			</label>			
		</form>
		<div class="bottom">
			<span></span>
			<img src="iponeImg/logo.png" />
			<span></span>
		</div>		
		<div id="success">
			<div class="successImg">
				<a class="close"></a>
				<p><img src="iponeImg/chenggong.png" />恭喜提交成功</p>
				<p style="padding-top: 0px;font-size: 23px;">分享一下，安抚激动的心</p>
			</div>
		</div>
	</body>
</html>

<!-- scripts -->
<script src="/wamei/pages/js/jquery.min.js"></script>
<script src="/wamei/pages/js/jquery.form.js"></script>
<script src="/wamei/pages/js/bootstrap.min.js"></script>
<script src="/wamei/pages/js/Validform_v5.3.2.js"></script>

<script type="text/javascript">

	$(function(){
		//提交表单
		$("#activityForm").Validform({
			btnSubmit:"#confirm",
			tiptype:function(msg){
				if(msg != '' && msg!='通过信息验证！'){
					alert(msg);
				}
			},
			tipSweep:true,
			beforeSubmit:function(){
				saveForm();
				return false;
			}
		});
	});

	//只允许在APP内打开
	function isMobile(){
		var u = navigator.userAgent;
		var mobileFlag = u.indexOf('type/tfbrowser') > -1;
		return mobileFlag;
	}

	//手机号码验证
	$("#mobilePhone").blur(function(){
		var mobilePhone =$("#mobilePhone").val();
		var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if(mobilePhone){
			if(!myreg.test(mobilePhone)){
				alert("请输入有效的手机号码！");
				$("#mobilePhone").val("");
				return ;
			}
		}
	});

	//发送短信验证码
	$("#num").click(function(){
		var mobilePhone =$("#mobilePhone").val();
		var url="/wamei/activityController/sendValidCode.htm";
		if(!mobilePhone){
			alert("请输入您的手机号码！");
			return ;
		}
		var mark = $("#num").attr("mark");
		if("1"==mark){
			settime(this);
			$.post(url,{mobilePhone:mobilePhone},function(html){
				var data = eval("("+html+")");
				if(data && data.statusCode==1){
					console.log("send success!");
					alert("短信验证码已发送，请查收！");
				}else{
					alert(data.msg);
				}
			});
		}
	});


	//提交form表单
	function saveForm(){
		$("#activityForm").ajaxSubmit({
			//data: {'columnStr':columnStr},
			type: 'post',
			async: false,
			success: function($data) {
				var data = eval("("+$data+")");
				if(data && data.statusCode==1){
					$("#success").show();
				}else{
					alert(data.msg);
					$("#mobilePhone").val("");
				}
			}
		});
	}

	$(".close").click(function(){
		$("#success").hide();
		window.location.reload();
	})

	//短信后倒计时
	var countdown=60;
	function settime(obj) {
		if (countdown == 0) {
			$(obj).attr("disabled",false);
			$(obj).attr("mark","1");
			$(obj).html("获取验证码");
			countdown = 60;
			return;
		} else {
			$(obj).attr("disabled", true);
			$(obj).attr("mark","0");
			$(obj).html("重新发送(" + countdown + ")");
			countdown--;
		}
		setTimeout(function() {
					settime(obj) }
				,1000)
	}

//	$("#confirm").click(function(){
//		$("#success").show();
//	})

</script>

kenhins

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
短信验证码---重新发送倒计时

参考代码： var countdown=60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value="免费获取验证码"; countdown = 60; return;
复制链接

扫一扫