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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
跟我学习javascript的循环
Nov 18 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
layui动态加载多表头的实例
Sep 05 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
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue-cli中的webpack配置详解
2017/09/25 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python是怎样处理json模块的
2020/07/16 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
详解Python中的文件操作
2021/01/14 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
学习十八大报告感言
2014/02/04 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
大学毕业生自我评价
2015/03/02 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
用Python生成会跳舞的美女
2022/01/18 Python