php实例 shell脚本 jquery选择器 python模拟登录 linux命令 nginx apache
当前位置：首页 > 脚本编程 > jquery > jquery教程 > 正文

jquery倒计时按钮功能的五种实现代码

发布时间：2020-03-04编辑：脚本学堂
jquery实现倒计时按钮功能，在短信发送时显示倒计时效果，这里分享五种实现方法与代码，帮助大家理解并掌握jquery倒计时按钮功能的实现方法。

jquery倒计时按钮功能的五个例子

代码一：
 

{
 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>jQuery倒计时按钮_www.jb200.com</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>
上一篇：jquery与css实现多按钮单击变色效果
下一篇：jquery按钮轮换选中怎么实现？

与 jquery倒计时按钮功能的五种实现代码 有关的文章

浏览排行

栏目分类

栏目导航

热点文章

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
鄂ICP备13010364号-22

CopyRight © 2010-2021 脚本学堂 Jb200.com , All Rights Reserved.