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>
Javascript 相关文章推荐
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
vue 解决异步数据更新问题
Oct 29 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
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
聊天室php&amp;mysql(六)
2006/10/09 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python自动化生成IOS的图标
2018/11/13 Python
树莓派实现移动拍照
2019/06/22 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
一个SQL面试题
2014/08/21 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
土地转让协议书范本
2014/04/15 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技