jQuery短信验证倒计时功能实现方法详解


Posted in Javascript onMay 25, 2016

本文实例讲述了jQuery短信验证倒计时功能实现方法。分享给大家供大家参考,具体如下:

<!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>demo 短信验证码60秒,并限制次数</title>
<script src="js/time.js" type="text/javascript"></script>
</head>
<body>
<div class="input">
  <input type="button" id="btn" class="btn_mfyzm" value="获取验证码" />
</div>
</body>
<script>
var wait=60*2;
document.getElementById("btn").disabled = false;
function time(o) {
    if (wait == 0) {
      o.removeAttribute("disabled");
      o.value="免费获取验证码";
      wait = 60*2;
    } else {
      o.setAttribute("disabled", true);
      o.value="重新发送(" + wait + ")";
      wait--;
      setTimeout(function() {
        time(o)
      },
      1000)
    }
  }
document.getElementById("btn").onclick=function(){time(this);}
</script>
</html>

time.js内容如下:

var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,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 + "秒内输入验证码");
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js DOM 元素ID就是全局变量
Sep 20 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
input框中的name和id的区别
Nov 16 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
js数组的基本使用总结
Jan 18 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 #Javascript
BootStrap的Datepicker控件使用心得分享
May 25 #Javascript
jquery按回车键实现表单提交的简单实例
May 25 #Javascript
Javascript之BOM(window对象)详解
May 25 #Javascript
jQueryUI中的datepicker使用方法详解
May 25 #Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 #Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
You might like
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
在模板页面的js使用办法
2010/04/01 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python实现石头剪刀布程序
2021/01/20 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
解决Python使用列表副本的问题
2019/12/19 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
销售心得体会
2014/01/02 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
护理培训心得体会
2016/01/22 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python