Example of jQuery Realizing Countdown and Resending SMS Verification Code Function
- 2021-07-10 18:31:01
- OfStack
In this paper, an example is given to describe the method of jQuery to realize the function of resending SMS verification code in countdown. Share it for your reference, as follows:
<!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=" Get the verification code for free ";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value=" Resend (" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
</script>
<body>
<input type="button" id="btn" value=" Get the verification code for free " onclick="settime(this)" />
</body>
</html>
Practical examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Preemption iPhone7 Exclusive reservation quota </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> Time-to-market simultaneous sale <span></span><br /> The first batch of new apples 30 Reservation of exclusive places </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=" Please enter your real name " datatype="*1-20" errormsg=" Most names 20 Chinese and English characters! " nullmsg=" Please enter your real name! " />
</label>
<label>
<span><img src="iponeImg/dianhua.png" /></span>
<i></i>
<input type="text" class="inline-input" id="mobilePhone" name="mobilePhone" placeholder=" Please enter your mobile phone number " datatype="*" errormsg=" Please enter your mobile phone number! " nullmsg=" Please enter your mobile phone number! " />
</label>
<label>
<span><img src="iponeImg/yanzhengma.png" /></span>
<i></i>
<input type="text" id="validateCode" class="inline-input" name="validateCode" placeholder=" Verification code " datatype="*" errormsg=" Please enter the verification code! " nullmsg=" Please enter the verification code! " style="width:180px;" />
<a id="num" mark="1" > Get verification code </a>
</label>
<label id="get">
<input id="confirm" type="submit" value=" Submit to seize the quota " />
</label>
<label>
<a href="/wamei/pages/activity/details.html" id="activity"> View event details </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" /> Congratulations on the successful submission </p>
<p style="padding-top: 0px;font-size: 23px;"> Sharing 1 Next, appease the excited heart </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(){
// Submit a form
$("#activityForm").Validform({
btnSubmit:"#confirm",
tiptype:function(msg){
if(msg != '' && msg!=' Passed the information verification! '){
alert(msg);
}
},
tipSweep:true,
beforeSubmit:function(){
saveForm();
return false;
}
});
});
// Only allowed in APP Inside opening
function isMobile(){
var u = navigator.userAgent;
var mobileFlag = u.indexOf('type/tfbrowser') > -1;
return mobileFlag;
}
// Mobile phone number verification
$("#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(" Please enter a valid mobile phone number! ");
$("#mobilePhone").val("");
return ;
}
}
});
// Send SMS verification code
$("#num").click(function(){
var mobilePhone =$("#mobilePhone").val();
var url="/wamei/activityController/sendValidCode.htm";
if(!mobilePhone){
alert(" Please enter your mobile phone number! ");
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(" SMS verification code has been sent, please check it! ");
}else{
alert(data.msg);
}
});
}
});
// Submit form 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();
})
// Countdown after text message
var countdown=60;
function settime(obj) {
if (countdown == 0) {
$(obj).attr("disabled",false);
$(obj).attr("mark","1");
$(obj).html(" Get verification code ");
countdown = 60;
return;
} else {
$(obj).attr("disabled", true);
$(obj).attr("mark","0");
$(obj).html(" Resend (" + countdown + ")");
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
// $("#confirm").click(function(){
// $("#success").show();
// })
</script>
PS: Here are two very convenient regular expression tools for your reference:
JavaScript Regular Expression Online Test Tool:
http://tools.ofstack.com/regex/javascript
Regular expression online generation tool:
http://tools.ofstack.com/regex/create_reg
For more readers interested in jQuery related contents, please check the topics of this site: "Summary of jQuery Date and Time Operation Skills", "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery" and "Summary of jquery Selector Usage"
I hope this article is helpful to everyone's jQuery programming.