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 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 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修改指定文件后缀的方法
2014/09/11 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript中this详解
2015/09/01 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
opencv+python实现均值滤波
2020/02/19 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
社团文化节邀请函
2014/01/10 职场文书
办理生育手续介绍信
2014/01/14 职场文书
医院营销工作计划
2015/01/16 职场文书
采购员工作总结范文
2015/08/12 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android