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 相关文章推荐
jQuery live
May 15 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 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批量删除数据
2007/01/18 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
对联广告js flash激活
2006/10/19 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
CentOS中升级Python版本的方法详解
2017/07/10 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python-接口开发入门解析
2019/08/01 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
银行委托书范本
2014/09/28 职场文书
个人职业及收入证明
2014/10/13 职场文书
贷款承诺书
2015/01/20 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
教导主任个人总结
2015/03/03 职场文书
领导干部失职检讨书
2015/05/05 职场文书
被告答辩状范文
2015/05/22 职场文书
国博复兴之路观后感
2015/06/02 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
德生2P3收音机开箱评测
2022/04/30 无线电