首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 03, 2014

代码一：

{ 
 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>

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

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
详解jquery validate实现表单验证 （正则表达式）
Jan 18 Javascript
详解webpack 打包文件体积过大解决方案（code splitting）
Apr 10 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
jQuery自带的一些常用方法总结
Sep 03 #Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 #Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 #Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 #Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 #Javascript
Egret引擎开发指南之视觉编程
Sep 03 #Javascript
Egret引擎开发指南之发布项目
Sep 03 #Javascript
铁拳(1) 绿林侠盗(1) 东方异文石(1) 吸血鬼(1) 遗弃(1) 暴雪(1) 我的世界(1) LOL(1) 小缇娜的奇幻之地(1) 战锤40K(1)
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python实现控制COM口的示例
2019/07/03 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python队列原理及实现方法示例
2019/11/27 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
个人自荐书
2013/12/20 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
十八大演讲稿
2014/05/22 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
先进党组织事迹材料
2014/12/26 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书