setInterval 一個定時器搞定

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于網站制作、成都網站建設、柳南網絡推廣、微信平臺小程序開發(fā)、柳南網絡營銷、柳南企業(yè)策劃、柳南品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供柳南建站搭建服務，24小時服務熱線：18982081108，官方網址：chinadenli.net

<style>
button{
  background: #45BCF9;
  color: #fff;
  padding: 4px 10px;
  border: none;
  outline: none;
  cursor: pointer;
}
button:hover{
  background: #00a8fe;
}
button.disabled{
  background: #000;
  cursor: auto;
}
button.disabled:hover{
  background: #000;
}
</style>
<button type="button" onclick="fn()">獲取驗證碼</button>
<script>
function fn(){
  var oBtn = document.getElementsByTagName('button')[0];
  var time = 60;
  var timer = null;
  oBtn.innerHTML = time + '秒后重新發(fā)送';
  oBtn.setAttribute('disabled', 'disabled');  // 禁用按鈕
  oBtn.setAttribute('class', 'disabled');   // 添加class 按鈕樣式變灰
  timer = setInterval(function(){
    // 定時器到底了 兄弟們回家啦
    if(time == 1){
      clearInterval(timer);       
      oBtn.innerHTML = '獲取驗證碼';  
      oBtn.removeAttribute('disabled'); 
      oBtn.removeAttribute('class');  
    }else{
      time--;
      oBtn.innerHTML = time + '秒后重新發(fā)送';
    }
  }, 1000)
}
</script>

本文題目：JS實現獲取驗證碼倒計時功能-創(chuàng)新互聯(lián)
本文URL：http://chinadenli.net/article4/deipie.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網站、ChatGPT、面包屑導航、域名注冊、網站營銷、企業(yè)網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)