jQuery实现倒计时按钮功能代码分享

前端技术 2023/09/05 JavaScript

代码一：

{ 
 wait:90,
 
 hsTime:function(that){
 
   if (this.wait == 0) { 
    $(\'#hsbtn\').removeAttr(\"disabled\").val(\'重发短信验证码\');   
    this.wait = 90; 
   } else { 
    var _this = this;
    $(that).attr(\"disabled\", true).val(\'在\'+_this.wait+\'秒后点此重发\');
    _this.wait--; 
    setTimeout(function() { 
     _this.hsTime(that); 
    }, 1000) 
   } 
  },
}

代码二:

<!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; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = \"\"; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
   curCount = count;
   var dealType; //验证方式
var uid=$(\"#uid\").val();//用户uid
if ($(\"#phone\").attr(\"checked\") == true) {
    dealType = \"phone\";
   }
   else {
    dealType = \"email\";
   }
   //产生验证码
for (var i = 0; i < codeLength; i++) {
    code += parseInt(Math.random() * 9).toString();
   }
   //设置button效果，开始计时
    $(\"#btnSendCode\").attr(\"disabled\", \"true\");
    $(\"#btnSendCode\").val(\"请在\" + curCount + \"秒内输入验证码\");
    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
    $.ajax({
     type: \"POST\", //用POST方式传输
     dataType: \"text\", //数据格式:JSON
     url: \'Login.ashx\', //目标地址
     data: \"dealType=\" + dealType +\"&uid=\" + uid + \"&code=\" + code,
     error: function (XMLHttpRequest, textStatus, errorThrown) { },
     success: function (msg){ }
    });
   }
  //timer处理函数
function SetRemainTime() {
   if (curCount == 0) {    
    window.clearInterval(InterValObj);//停止计时器
    $(\"#btnSendCode\").removeAttr(\"disabled\");//启用按钮
    $(\"#btnSendCode\").val(\"重新发送验证码\");
    code = \"\"; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效 
   }
   else {
    curCount--;
    $(\"#btnSendCode\").val(\"请在\" + curCount + \"秒内输入验证码\");
   }
  }
 </script>
</head>
<body>
  <input id=\"btnSendCode\" type=\"button\" value=\"发送验证码\" onclick=\"sendMessage()\" /></p>
</body>
</html>

代码三：

<!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之后注册</title>
 <script src=\"../js/jquery-1.6.2.min.js\" type=\"text/javascript\"></script>
 <script type=\"text/javascript\" language=\"javascript\">
  var leftSeconds = 10;//倒计时时间10秒
  var intervalId;
  $(function () {
   $(\"#btn_reg\").attr(\"disabled\", true);//设置按钮不可用
   intervalId = setInterval(\"CountDown()\",1000);//调用倒计时的方法
  });
  function CountDown() {//倒计时方法
   if (leftSeconds <= 0) {
    $(\"#btn_reg\").val(\"注册\"); //当时间<=0的时候改变按钮的value
    $(\"#btn_reg\").attr(\"disabled\",false);//如果时间<=0的时候按钮可用
    clearInterval(intervalId); //取消由 setInterval() 设置的 timeout
    return;
   }
   leftSeconds--;
   $(\"#btn_reg\").val(\"请仔细阅读\"+leftSeconds+\"秒\");
  }
 </script>
</head>
<body>
<textarea cols=\"20\" rows=\"8\">10秒之后注册按钮才可以使用</textarea>
<input type=\"button\" value=\"注册\" id=\"btn_reg\" />
</body>
</html>

代码四：

<!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; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = \"\"; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
   curCount = count;
   var dealType; //验证方式
var uid=$(\"#uid\").val();//用户uid
if ($(\"#phone\").attr(\"checked\") == true) {
    dealType = \"phone\";
   }
   else {
    dealType = \"email\";
   }
   //产生验证码
for (var i = 0; i < codeLength; i++) {
    code += parseInt(Math.random() * 9).toString();
   }
   //设置button效果，开始计时
    $(\"#btnSendCode\").attr(\"disabled\", \"true\");
    $(\"#btnSendCode\").val(\"请在\" + curCount + \"秒内输入验证码\");
    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
    $.ajax({
     type: \"POST\", //用POST方式传输
     dataType: \"text\", //数据格式:JSON
     url: \'Login.ashx\', //目标地址
     data: \"dealType=\" + dealType +\"&uid=\" + uid + \"&code=\" + code,
     error: function (XMLHttpRequest, textStatus, errorThrown) { },
     success: function (msg){ }
    });
   }
  //timer处理函数
function SetRemainTime() {
   if (curCount == 0) {    
    window.clearInterval(InterValObj);//停止计时器
    $(\"#btnSendCode\").removeAttr(\"disabled\");//启用按钮
    $(\"#btnSendCode\").val(\"重新发送验证码\");
    code = \"\"; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效 
   }
   else {
    curCount--;
    $(\"#btnSendCode\").val(\"请在\" + curCount + \"秒内输入验证码\");
   }
  }
 </script>
</head>
<body>
  <input id=\"btnSendCode\" type=\"button\" value=\"发送验证码\" onclick=\"sendMessage()\" /></p>
</body>
</html>

代码五：

最近在写短信发送验证码，就写了个js/jquery倒计时发送验证码按钮
<script language=\"javascript\" src=\"jquery-1.7.1.min.js\"></script>
<input type=\"button\" id=\"btn\" value=\"免费获取验证码\" />
<script type=\"text/javascript\">
var wait=10;
function time(t) {
  if (wait == t) {
   t.removeAttribute(\"disabled\");   
   t.value=\"免费获取验证码\";
   wait = 10;
  } else {
   t.setAttribute(\"disabled\", true);
   t.value=\"重新发送(\" + wait + \")\";
   wait--;
   setTimeout(function() {
    time(t)
   },
   1000)
  }
 }
 $(document).ready(function(){
 $(\"#btn\").click( function () { 
 
time(this);
 });
});
</script>

本文地址：https://www.stayed.cn/item/14137

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案