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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
js实现产品缩略图效果
Mar 10 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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 Mysql日期和时间函数集合
2007/11/16 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python每天定时运行某程序代码
2019/08/16 Python
python3 re返回形式总结
2020/11/20 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
六道php面试题附答案
2014/06/05 面试题
岳父生日宴会答谢词
2014/01/13 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
实验心得体会
2014/09/05 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
安全教育的主题班会
2015/08/13 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python