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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

赞 (0)

相关推荐

  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • jQuery模拟爆炸倒计时功能实例代码

     HTML部分  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动

  • jQuery实现的倒计时效果实例小结

    本文实例总结了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

  • jQuery实现简单倒计时功能的方法

    jQuery实现简单倒计时功能的方法

    本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

  • jquery实现的判断倒计时是否结束代码

    本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

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

    本文实例讲述了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" > &l

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • vue实现短信验证码登录功能（流程详解）

    无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,最后先服务器发送请求,保存登录的信息,一个必不可少的功能 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,得到验证码 3,输入的验证码是否为空和是否正确, 4,最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <template> <div class="text_group"> <div class="input_

  • php实时倒计时功能实现方法详解

    本文实例讲述了php实时倒计时功能实现方法.分享给大家供大家参考,具体如下: 这几天公司要做一个限时购物的功能.这就要做到倒计时,要有实时的倒计时. 要求: 1) 要有小时分钟秒的实时倒计时的显示 2)用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准) 其实这和很多的考试等系统的时间限制功能同样的要求. 解决思路: 1)总不能用ajax每秒都获取服务器时间吧. 所以实时倒计时一定要用javascript实现.这很简单.网上一大把的例子. 2)现在问题是解决用户端修改日期时间对

  • jquery表单验证插件validation使用方法详解

    jquery表单验证插件validation使用方法详解

    一.如何使用 引入js文件 <script src="jquery.js"></script> <script src="jquery.validate-1.13.1.js"></script> 编写html页面,这里仅以用户名.密码为例 <body> <form id="demoForm"> <fieldset> <legend>用户登录</l

  • Android中用Bmob实现短信验证码功能的方法详解

    Android中用Bmob实现短信验证码功能的方法详解

    这篇文章主要介绍发送验证码和校验验证码的功能,用到一个第三方平台Bmob,那Bmob是什么呢?Bmob可以开发一个云存储的移动应用软件,他提供了大量的标准的API接口,根据需要接入相关服务,开发者可以更加专注于应用的开发,让产品交付更快速,验证码功能就是其中一个. 一.跟其他第三方一样,我们开发之前要做一些准备工作. 1.首先,去官网注册一个帐号:http://www.bmob.cn/: 2.然后就可以创建应用了:具体怎么做Bmob说得很清楚了(官方操作介绍),如果你不想看,我简单说一下:点击右

  • swift 3.0 实现短信验证码倒计时功能

    下面一段代码给大家分享swift 3.0 实现短信验证码倒计时功能,具体实例代码如下所示: class TCCountDown { private var countdownTimer: Timer? var codeBtn = UIButton() private var remainingSeconds: Int = 0 { willSet { codeBtn.setTitle("重新获取\(newValue)秒", for: .normal) if newValue <=

  • Android使用CountDownTimer模拟短信验证倒计时

    Android使用CountDownTimer模拟短信验证倒计时

    本文为大家分享了CountDownTimer模拟短信验证倒计时的具体代码,供大家参考,具体内容如下 内容:介绍倒计时CountDownTimer的基本使用方法.模拟短信验证 步骤: 1.继承CountDownTimer,重写onTick().onFinish() 2.代码中new出CountDownTimer子类,传好参数,调用start()执行 代码如下: <?xml version="1.0" encoding="utf-8"?> <Relat

  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

  • jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //

随机推荐