首页
所有分类
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代码）
Oct 29 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
js轮播图代码分享
Jul 14 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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
JDK(1) Hadoop(1) Simhash(1) 九宫格(5) RecyclerView(1) queue(1) TaiShan(1) 云服务器(1) 腾讯云(1) 内存池(1)
You might like
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 猴子摘桃的算法
2017/06/20 PHP
js中根据字数截取字符串，不能截断url
2012/01/12 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
详解JavaScript的Date对象（制作简易钟表）
2020/04/07 Javascript
JS面向对象编程详解
2016/03/06 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Vue性能优化的方法
2020/07/30 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Python与C/C++的相互调用案例
2021/03/04 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
自荐信怎么写呢？
2013/12/09 职场文书
单位委托书怎么写
2014/08/02 职场文书
结婚保证书（三从四德）
2015/02/26 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript