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 相关文章推荐
js下拉菜单语言选项简单实现
Sep 23 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
《王二小》教学反思
2014/02/27 职场文书
给小学生的新年寄语
2014/04/04 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
《角的度量》教学反思
2016/02/18 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Java字符串逆序方法详情
2022/03/21 Java/Android