欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能(防止刷新倒計(jì)時(shí)失效)

 更新時(shí)間:2017年07月07日 16:35:52   作者:非陽(yáng)  
這篇文章主要介紹了JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能防止刷新倒計(jì)時(shí)失效問(wèn)題,在項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)用到此功能,下面小編通過(guò)本文給大家分享JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能(防止刷新倒計(jì)時(shí)失效),需要的朋友參考下吧

應(yīng)用場(chǎng)景

在開(kāi)發(fā)“發(fā)送短信驗(yàn)證”功能時(shí)候,要解決一個(gè)問(wèn)題,防止惡意或頻繁發(fā)送短信驗(yàn)證碼問(wèn)題。一般原理是“當(dāng)點(diǎn)擊發(fā)送按鈕時(shí),發(fā)送ajax請(qǐng)求到服務(wù)器發(fā)送短信驗(yàn)證碼,成功則把發(fā)送按鈕設(shè)置為不可點(diǎn)擊,并且調(diào)用定時(shí)器,按鈕顯示倒計(jì)時(shí)”。如果就這樣不對(duì)倒計(jì)時(shí)存儲(chǔ)做處理,那么當(dāng)刷新頁(yè)面,會(huì)出現(xiàn)倒計(jì)時(shí)失效,按鈕可點(diǎn)擊。提供以下解決方案:

  • 利用cookie存儲(chǔ)倒計(jì)時(shí)
  • 利用HTML5的localStorage 存儲(chǔ)倒計(jì)時(shí)

利用cookie存儲(chǔ)倒計(jì)時(shí)

發(fā)送成功后把剩余倒計(jì)時(shí)存儲(chǔ)到cookie,當(dāng)頁(yè)面刷新時(shí),檢查cookie 是否還存儲(chǔ)著剩余倒計(jì)時(shí)?,如果有,發(fā)送按鈕則保持倒計(jì)時(shí)狀態(tài),不可點(diǎn)擊,否則發(fā)送按鈕可點(diǎn)擊。

HTML代碼

<input type="button" id="btn" disabled="disabled" value="獲取驗(yàn)證碼">

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存在倒計(jì)時(shí)
     timekeeping();
   }else{//cookie 沒(méi)有倒計(jì)時(shí)
     $('#btn').attr("disabled", false);
   }
   function timekeeping(){
    //把按鈕設(shè)置為不可以點(diǎn)擊
    $('#btn').attr("disabled", true);
    var interval=setInterval(function(){//每秒讀取一次cookie
     //從cookie 中讀取剩余倒計(jì)時(shí)
     total=$.cookie("total");
     //在發(fā)送按鈕顯示剩余倒計(jì)時(shí)
     $('#btn').val('請(qǐng)等待'+total+'秒');
     //把剩余總倒計(jì)時(shí)減掉1
     total--;
     if(total==0){//剩余倒計(jì)時(shí)為零,則顯示 重新發(fā)送,可點(diǎn)擊
     //清除定時(shí)器
     clearInterval(interval);
     //刪除cookie
     total=$.cookie("total",total, { expires: -1 });
     //顯示重新發(fā)送
     $('#btn').val('重新發(fā)送');
     //把發(fā)送按鈕設(shè)置為可點(diǎn)擊
     $('#btn').attr("disabled", false);
     }else{//剩余倒計(jì)時(shí)不為零
     //重新寫入總倒計(jì)時(shí)
     $.cookie("total",total);
     }
    },1000);
   }
   //綁定發(fā)送按鈕
    $('#btn').click(function(event) {
   /* Act on the event */
   // alert($("#btn").val());
   //校驗(yàn)手機(jī)號(hào)碼
   var phone=$('#phone').val();
   var pre=/^[1][358][0-9]{9}$/;
   if(phone==''){
     layer.open({
       content: '手機(jī)號(hào)碼不能為空',
       time: 2
     });
     return this;
   }else{
     var pre=/^[1][358][0-9]{9}$/;
     if(!pre.test(phone)){
      layer.open({
        content: '手機(jī)號(hào)碼格式有誤!',
        time: 2
      });
       return this;
     }
   }
   $.ajax({
    url: '',//服務(wù)器發(fā)送短信
    type: 'GET',
    dataType: 'json',
    data: {phone: phone},
   })
   .done(function(re) {
      var str="發(fā)送短信驗(yàn)證碼成功,請(qǐng)注意查看您的手機(jī)";
      // console.log(re);
      if(re){
        $.cookie("total",60);
        timekeeping();
      }else{
        switch (re[0]) {
         case '160038':
          str="短信驗(yàn)證碼發(fā)送過(guò)頻繁";
          break; 
         case '160034':
          str="號(hào)碼黑名單";
          break; 
         case '160000':
          str="系統(tǒng)錯(cuò)誤";
          break;
         case '000000':
          str="發(fā)送成功";
          break;
         case '112300':
          str="接收短信的手機(jī)號(hào)碼為空";
          break; 
         case '160040':
          str="驗(yàn)證碼超出發(fā)送上限";
          break;
         case '160042':
          str="號(hào)碼格式有誤";
          break; 
         default:
          str="發(fā)送驗(yàn)證碼失敗";
          break;
        }
      }
      layer.open({
         content: str,
         time: 2
       });
   })
   .fail(function() {
    console.log("error");
   })
   .always(function() {
    console.log("complete");
   });
  });
  })
</script>

以上所述是小編給大家介紹的JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能(防止刷新倒計(jì)時(shí)失效),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • window.addeventjs事件驅(qū)動(dòng)函數(shù)集合addEvent等

    window.addeventjs事件驅(qū)動(dòng)函數(shù)集合addEvent等

    addEvent()、removeEvent()、handleEvent()、fixEvent()[
    2008-02-02
  • PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)

    PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)

    PHP的自動(dòng)加載就是我們加載實(shí)例化類的時(shí)候,不需要手動(dòng)去寫require來(lái)導(dǎo)入這個(gè)class.php文件,程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來(lái)這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下
    2017-12-12
  • JavaScript中new操作符的原理示例詳解

    JavaScript中new操作符的原理示例詳解

    javascript中的new是一個(gè)語(yǔ)法糖,new的過(guò)程實(shí)際上是創(chuàng)建一個(gè)新對(duì)象,把新象的原型設(shè)置為構(gòu)造器函數(shù)的原型,這篇文章主要給大家介紹了關(guān)于JavaScript中new操作符原理的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • javascript單例模式與策略模式實(shí)例詳解

    javascript單例模式與策略模式實(shí)例詳解

    這篇文章主要介紹了javascript單例模式與策略模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript單例模式與策略模式基本概念、功能、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2023-06-06
  • JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法

    JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法

    這篇文章主要介紹了JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法,涉及針對(duì)字符串參數(shù)的處理方法,需要的朋友可以參考下
    2016-08-08
  • 淺談webpack對(duì)樣式的處理

    淺談webpack對(duì)樣式的處理

    這篇文章主要介紹了淺談webpack對(duì)樣式的處理,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • JavaScript實(shí)現(xiàn)的九種排序算法

    JavaScript實(shí)現(xiàn)的九種排序算法

    這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)的九種排序算法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • js高手進(jìn)階實(shí)用語(yǔ)法的高級(jí)寫法

    js高手進(jìn)階實(shí)用語(yǔ)法的高級(jí)寫法

    這篇文章主要介紹了js高手進(jìn)階實(shí)用語(yǔ)法的高級(jí)寫法的相關(guān)資料,需要的朋友可以參考下
    2023-08-08
  • 原生JavaScript實(shí)現(xiàn)彈幕組件的示例代碼

    原生JavaScript實(shí)現(xiàn)彈幕組件的示例代碼

    這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)彈幕組件的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10

最新評(píng)論