Of Stack

JQuery countdown button function code sharing

  • 2020-03-30 03:52:45
  • OfStack

A code: 


{ 
 wait:90,
 
 hsTime:function(that){
 
   if (this.wait == 0) { 
    $('#hsbtn').removeAttr("disabled").val(' Resend SMS verification code ');   
    this.wait = 90; 
   } else { 
    var _this = this;
    $(that).attr("disabled", true).val(' in '+_this.wait+' Click here to send again in seconds ');
    _this.wait--; 
    setTimeout(function() { 
     _this.hsTime(that); 
    }, 1000) 
   } 
  },
}

Code 2: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">

  var InterValObj; //The timer variable controls the time
var count = 5; //The interval function executes in 1 second
var curCount;//Current number of seconds left
var code = ""; //Verification code
var codeLength = 6;//Verification code The length of the 
function sendMessage() {
   curCount = count;
   var dealType; //Verify the way
var uid=$("#uid").val();//User's uid
if ($("#phone").attr("checked") == true) {
    dealType = "phone";
   }
   else {
    dealType = "email";
   }
   // produce Verification code
for (var i = 0; i < codeLength; i++) {
    code += parseInt(Math.random() * 9).toString();
   }
   //Set the button effect and start the timer
    $("#btnSendCode").attr("disabled", "true");
    $("#btnSendCode").val(" please " + curCount + " A second input Verification code");
    InterValObj = window.setInterval(SetRemainTime, 1000); //Start the timer and execute once every second
//Send processing data to the background
    $.ajax({
     type: "POST", //It's sent by POST
     dataType: "text", //Data format :JSON
     url: 'Login.ashx', //The target address
     data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
     error: function (XMLHttpRequest, textStatus, errorThrown) { },
     success: function (msg){ }
    });
   }
  //Timer handler
function SetRemainTime() {
   if (curCount == 0) {    
    window.clearInterval(InterValObj);//Stop timer
    $("#btnSendCode").removeAttr("disabled");//Enable the button
    $("#btnSendCode").val(" To resend Verification code");
    code = ""; // remove Verification code . If not cleared, over time, enter received Verification code Is still valid  
   }
   else {
    curCount--;
    $("#btnSendCode").val(" please " + curCount + " A second input Verification code");
   }
  }
 </script>
</head>
<body>
  <input id="btnSendCode" type="button" value=" send Verification code" onclick="sendMessage()" /></p>
</body>
</html>

Code 3: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>10 After the registration </title>
 <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript">
  var leftSeconds = 10;//The countdown is 10 seconds
  var intervalId;
  $(function () {
   $("#btn_reg").attr("disabled", true);//The Settings button is not available
   intervalId = setInterval("CountDown()",1000);//Call the countdown method
  });
  function CountDown() {//Countdown method
   if (leftSeconds <= 0) {
    $("#btn_reg").val(" registered "); //When time <Change the value of the button when =0
    $("#btn_reg").attr("disabled",false);//If time <The button is available when =0
    clearInterval(intervalId); //Cancels the timeout set by setInterval()
    return;
   }
   leftSeconds--;
   $("#btn_reg").val(" Please read it carefully "+leftSeconds+" seconds ");
  }
 </script>
</head>
<body>
<textarea cols="20" rows="8">10 The registration button can only be used after seconds </textarea>
<input type="button" value=" registered " id="btn_reg" />
</body>
</html>

Code 4: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">

  
  var InterValObj; //The timer variable controls the time
var count = 5; //The interval function executes in 1 second
var curCount;//Current number of seconds left
var code = ""; //Verification code
var codeLength = 6;//Verification code The length of the 
function sendMessage() {
   curCount = count;
   var dealType; //Verify the way
var uid=$("#uid").val();//User's uid
if ($("#phone").attr("checked") == true) {
    dealType = "phone";
   }
   else {
    dealType = "email";
   }
   // produce Verification code
for (var i = 0; i < codeLength; i++) {
    code += parseInt(Math.random() * 9).toString();
   }
   //Set the button effect and start the timer
    $("#btnSendCode").attr("disabled", "true");
    $("#btnSendCode").val(" please " + curCount + " A second input Verification code");
    InterValObj = window.setInterval(SetRemainTime, 1000); //Start the timer and execute once every second
//Send processing data to the background
    $.ajax({
     type: "POST", //It's sent by POST
     dataType: "text", //Data format :JSON
     url: 'Login.ashx', //The target address
     data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
     error: function (XMLHttpRequest, textStatus, errorThrown) { },
     success: function (msg){ }
    });
   }
  //Timer handler
function SetRemainTime() {
   if (curCount == 0) {    
    window.clearInterval(InterValObj);//Stop timer
    $("#btnSendCode").removeAttr("disabled");//Enable the button
    $("#btnSendCode").val(" To resend Verification code");
    code = ""; // remove Verification code . If not cleared, over time, enter received Verification code Is still valid  
   }
   else {
    curCount--;
    $("#btnSendCode").val(" please " + curCount + " A second input Verification code");
   }
  }
 </script>
</head>
<body>
  <input id="btnSendCode" type="button" value=" send Verification code" onclick="sendMessage()" /></p>
</body>
</html>

Code 5: 


 Recently in writing a text message to send verification code, wrote a js/jquery Countdown to send verification code button 
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<input type="button" id="btn" value=" Free access to captcha " />
<script type="text/javascript">
var wait=10;
function time(t) {
  if (wait == t) {
   t.removeAttribute("disabled");   
   t.value=" Free access to captcha ";
   wait = 10;
  } else {
   t.setAttribute("disabled", true);
   t.value=" To resend (" + wait + ")";
   wait--;
   setTimeout(function() {
    time(t)
   },
   1000)
  }
 }
 $(document).ready(function(){
 $("#btn").click( function () { 
 
time(this);
 });
});
</script>

Related articles: