JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

应用场景

在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时”。如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击。提供以下解决方案:

  • 利用cookie存储倒计时
  • 利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

发送成功后把剩余倒计时存储到cookie,当页面刷新时,检查cookie 是否还存储着剩余倒计时?,如果有,发送按钮则保持倒计时状态,不可点击,否则发送按钮可点击。

HTML代码

<input type="button" id="btn" disabled="disabled" value="获取验证码">

jQuery代码

<!--引入jquery.cookie.js 插件-->
<script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<!--逻辑功能代码 -->
<script>
  $(function(){
   if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时
     timekeeping();
   }else{//cookie 没有倒计时
     $('#btn').attr("disabled", false);
   }
   function timekeeping(){
    //把按钮设置为不可以点击
    $('#btn').attr("disabled", true);
    var interval=setInterval(function(){//每秒读取一次cookie
     //从cookie 中读取剩余倒计时
     total=$.cookie("total");
     //在发送按钮显示剩余倒计时
     $('#btn').val('请等待'+total+'秒');
     //把剩余总倒计时减掉1
     total--;
     if(total==0){//剩余倒计时为零,则显示 重新发送,可点击
     //清除定时器
     clearInterval(interval);
     //删除cookie
     total=$.cookie("total",total, { expires: -1 });
     //显示重新发送
     $('#btn').val('重新发送');
     //把发送按钮设置为可点击
     $('#btn').attr("disabled", false);
     }else{//剩余倒计时不为零
     //重新写入总倒计时
     $.cookie("total",total);
     }
    },1000);
   }
   //绑定发送按钮
    $('#btn').click(function(event) {
   /* Act on the event */
   // alert($("#btn").val());
   //校验手机号码
   var phone=$('#phone').val();
   var pre=/^[1][358][0-9]{9}$/;
   if(phone==''){
     layer.open({
       content: '手机号码不能为空',
       time: 2
     });
     return this;
   }else{
     var pre=/^[1][358][0-9]{9}$/;
     if(!pre.test(phone)){
      layer.open({
        content: '手机号码格式有误!',
        time: 2
      });
       return this;
     }
   }
   $.ajax({
    url: '',//服务器发送短信
    type: 'GET',
    dataType: 'json',
    data: {phone: phone},
   })
   .done(function(re) {
      var str="发送短信验证码成功,请注意查看您的手机";
      // console.log(re);
      if(re){
        $.cookie("total",60);
        timekeeping();
      }else{
        switch (re[0]) {
         case '160038':
          str="短信验证码发送过频繁";
          break;
         case '160034':
          str="号码黑名单";
          break;
         case '160000':
          str="系统错误";
          break;
         case '000000':
          str="发送成功";
          break;
         case '112300':
          str="接收短信的手机号码为空";
          break;
         case '160040':
          str="验证码超出发送上限";
          break;
         case '160042':
          str="号码格式有误";
          break;
         default:
          str="发送验证码失败";
          break;
        }
      }
      layer.open({
         content: str,
         time: 2
       });
   })
   .fail(function() {
    console.log("error");
   })
   .always(function() {
    console.log("complete");
   });
  });
  })
</script>

以上所述是小编给大家介绍的JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JS出现失效的情况总结

    对于大前端来说,JS可谓是我们的神器,从页面的效果到数据的传递,再到后台的业务,无处不充斥着JS的身影,但是万能的JS也有贪玩的时候,某一时刻你就有可能发现你形影不离的JS突然间罢工了,这对我们前端来说绝对是头痛的事,作为前端君的我今天就和大家聊聊有哪些情况会导致JS突然性的罢工.  1.JS出现错误,比如函数没有闭合,JS的标签出现错误等等情况,都会使得JS不能执行,这时如果不能发现错误,就会陷入JS貌似挂掉了的情况,也给开发工作造成困扰.  2.还有一种情况就是你苦苦修改的页面发现并不是你运

  • jsp 网站引入外部css或者js失效问题解决

    最近做项目,完成项目经理布置的任务,开始入门java web,但在开发过程中遇到过许许多多的问题,但是令我最头痛的还是导入外部css一直失效,困扰许久才找出原因. 路径问题 css或者js导入失效最有可能的原因就是路径错误,这里我给出我的网站目录结构,大家可以参考下. 导入css代码: <link rel="stylesheet" type="text/css" href="css/login.css"> 记得jsp头部需要设置相对路

  • JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8

    经过分析发现,这个是因为页面中html与js编码不一致导致的,一般情况最好统一标准的utf8的 上网找了找,木有找到相关的解决办法,索性自己试了试. 原页面是这样写的: <html> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <script type="text/javascript" src=&

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: <!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/

  • js 开发之autocomplete="off"在chrom中失效的解决办法

    js 开发之autocomplete="off"在chrom中失效的解决办法 问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息.这时,在输入框中添加属性:autocomplete="off",一般能达到目的.而在chrom里面就失效. 失效的原因是:浏览器会根据输入框的input的type属性为password的时候,自动将用户名和密码框填充. 解决方法:因为浏览器是否自动填充内容,根据type=password来判断的.此时先将作为密码的输入

  • JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

    应用场景 在开发"发送短信验证"功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题.一般原理是"当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时".如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击.提供以下解决方案: 利用cookie存储倒计时 利用HTML5的localStorage 存储倒计时 利用cookie存储倒计时 发送成功后把剩余倒计时存储到coo

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • Android开发之获取短信验证码后按钮背景变化并且出现倒计时

    目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮背景变化并且出现倒计时,当倒计时结束后,如果你没有获取到验证码,可以再次点击. 代码如下所示: VerCodeTimer mVerCodeTimer=(Button) findViewById(R.id.login_get_ver_code); private class VerCodeTimer extends CountDownTimer

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

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

  • JS 实现发送短信验证码的“59秒后重新发送验证短信”功能

    倒计时--从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text" value="10" id="txt"> <input type="button" value="重新开始" id="btn"> </body> <script&

  • Laravel框架实现发送短信验证功能代码

    Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. Laravel短信验证思路详解 今天在做到用户注册和个人中心的安全管理时,我实现借助第三方短信平台在Laravel框架中进行手机验证的设置; 由于我做的是一个为客户提供医疗咨询和保健品网站,所以我们对客户个人隐私的保护显得尤为重要,因而在客户登录后进入个人中心前,

  • NodeJS 实现手机短信验证模块阿里大于功能

    1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://doc.alidayu.com/doc2/index.htm 1登录后点击管理中心 2点击应用管理===>创建应用 3配置管理===>验证码====>里添加短信签名 4应用列表里===>操作一栏===>点击设置    记住 app   key 和 APP  sercret 5.后台代

  • Android短信验证码(用的Mob短信验证)

    Android短信验证码功能,供大家参考,具体内容如下 1.参考资料 Mob网站:http://www.mob.com/ Mob在Github上的例子:https://github.com/MobClub/SMSSDK-for-Android 教程:Mob短信验证的具体使用 教程的源代码:  http://git.oschina.net/lizhanqi/MobSMSDemo Dialog教程:Android Dialog对话框 定时器教程:Android 实现定时器的四种方式 2.前期准备 (

  • 使用java实现手机短信验证全过程

    一.容联云平台 容联云平台是实现短信验证.还有语音功能等一些操作的平台,在平台注册还可以获得8元的新手额度,一条短信的费用是006元,也就是6分钱,在初学者测试也是可以非常人性化的,然后我这次进行测试的平台呢,也是用到容联云给进行展示 二.操作教程 2.1注册 当你注册进去之后会有8元的新手额度 填写测试号码 然后这里差不多了跟着下面走着 三.实践操作 3.1部署项目使用工具 本次使用的工具是IDEA,然后我为了简便就直接创建了Maven项目进行开发,因为使用到Maven之后是直接导入SDK的依

  • WPF MVVM制作发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一下. 在这个部分写了两个类文件:一个是生成随机数,一个是模拟发送此数字的. 1.因为生成几位随机数,是必须要到项目上线之前才能定的,因此,写了一个带参数的函数,如下 /// <summary> /// 生成随机验证码 /// </summary> public static class

随机推荐