js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能

更新時(shí)間：2017年02月05日 12:23:25 作者：秋天1014童話

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例講述了js實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js-手機(jī)發(fā)送短信倒計(jì)時(shí)</title>
 <style>
  button{
   width: 100px;
   height: 30px;
   border: none;
  }
  input{
   outline: none;
  }
 </style>
 <script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); } 
   $('btn').onclick = function(){
    clearInterval(timer); //清除計(jì)時(shí)器 
    var that = this;
    that.disabled = true;
    var count = 5;
    var timer = setInterval(function(){
     if(count>0){
      count--;
      that.innerHTML = "剩余時(shí)間"+ count +"s";
     }else{
      that.innerHTML ="重新發(fā)送短信";
      that.disabled = false;
      clearInterval(timer); //清除計(jì)時(shí)器
     }
    },1000);
   }
  }
 </script>
</head>
<body>
 <div class="box">
  <input type="text" id="txt">
  <button id="btn" >點(diǎn)擊發(fā)送短信</button>
 </div>
</body>
</html>

或者使用setTimeout來(lái)模擬，一般情況下，還是推薦使用setTimeout，更安全一些。當(dāng)使用setInterval(fn,1000)時(shí)，程序是間隔1s執(zhí)行一次，但是每次程序執(zhí)行是需要3s，那么就要等程序執(zhí)行完才能執(zhí)行下一次，即實(shí)際間隔時(shí)間為（間隔時(shí)間和程序執(zhí)行時(shí)間兩者的最大值）。而setTimeout（fn，1000）,代表的是，延遲1s再執(zhí)行程序，且僅執(zhí)行一次。每次程序執(zhí)行是需要3s，所以實(shí)際時(shí)間為 1s+3s=4s?？梢允褂胹etTimeout遞歸調(diào)用來(lái)模擬setInterval。

<script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); } 
   $('btn').onclick = function(){
    var that = this;
    that.disabled = true;
    var count = 5;
    var timer = setTimeout(fn,1000);
    function fn(){
     count--;
     if(count>0){
      that.innerHTML = "剩余時(shí)間"+ count +"s";
      setTimeout(fn,1000); 
     }else{
      that.innerHTML ="重新發(fā)送短信";
      that.disabled = false; 
     }
    }
   }
  }
 </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 值類型和引用類型的初次研究(推薦)
這篇文章主要介紹了JavaScript 值類型和引用類型的初次研究,需要的朋友可以參考下
2017-07-07
JavaScript 對(duì)象模型執(zhí)行模型
簡(jiǎn)單數(shù)值類型: 有Undefined, Null, Boolean, Number和String。注意，描述中的英文單詞在這里僅指數(shù)據(jù)類型的名稱，并不特指JS的全局對(duì)象N an, Boolean, Number, String等，它們?cè)诟拍钌系膮^(qū)別是比較大的。
2010-10-10
開(kāi)發(fā)中常用的25個(gè)JavaScript單行代碼(小結(jié))
這篇文章主要介紹了開(kāi)發(fā)中常用的25個(gè)JavaScript單行代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
微信小程序如何修改radio和checkbox的默認(rèn)樣式和圖標(biāo)
這篇文章主要介紹了微信小程序修改radio和checkbox的默認(rèn)樣式和圖標(biāo),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
javascript+HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了javascrip+HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-04-04
屏蔽script注入小例子
有關(guān)script注入想必大家也有所了解，在本文將為大家介紹下如何屏蔽script注入，下面有個(gè)不錯(cuò)的示例大家可以感受下
2013-11-11
javascript編寫(xiě)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript編寫(xiě)簡(jiǎn)易計(jì)算器的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript 加號(hào)(+)運(yùn)算符號(hào)
在一些框架中看到了類似這樣的寫(xiě)法:+new Date();感覺(jué)有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對(duì)此用法解釋如下,希望對(duì)大家有所幫助,不合適的地方請(qǐng)大家指正!
2009-12-12
javascript獲取flash版本號(hào)的方法
這篇文章主要介紹了javascript獲取flash版本號(hào)的方法,以實(shí)例形式分析了javascript判斷用戶是否安裝了Flash及獲取Flash版本號(hào)的方法,具有一定的實(shí)用價(jià)值,需要的朋友可以參考下
2014-11-11
JavaScript this綁定過(guò)程深入詳解
這篇文章主要介紹了JavaScript this綁定過(guò)程,結(jié)合實(shí)例形式深入分析了JavaScript中this關(guān)鍵字的功能、原理、綁定方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12