DIV CSS 佈局教程網

本文實例講述了JS基於遞歸實現倒計時效果的方法。分享給大家供大家參考，具體如下：

效果：

事件：

//發送驗證碼
$('.js-sms-code').click(function(){
    $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 後再試</span>");
    countdown();
    var tel = $('#tel').val();
    $.ajax({
      url: "{sh::U('Home/sendSmscode')}",
      type:'POST',
      dataType:"json",
      data: {tel: tel},
      success: function() {
      },
      error: function() {
        $('.js-help-info').html("請求失敗");
      }
    });
})

點評：這裡的countdown方法就是妙處。

看代碼：

function countdown() { // 遞歸
  setTimeout(function() {
    var time = $("#countdown").text();
    if (time == 1) {
      $('.js-sms-code').removeAttr("disabled");
      $('.js-sms-code').html("發送驗證碼");
    } else {
      $("#countdown").text(time - 1);
      countdown();
    }
  }, 1000);
}

點評：如果time不等於1，就繼續調用，同時時間減去一秒。setTimeout也很精髓。直至time減到1為止，移除disabled並更改內容為‘發送驗證碼'。

更多關於JavaScript相關內容可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。