JS基于遞歸實現(xiàn)倒計時效果的方法

更新時間：2016年11月26日 08:56:39 作者：牛逼的霍嘯林

這篇文章主要介紹了JS基于遞歸實現(xiàn)倒計時效果的方法,結(jié)合實例形式分析了javascript基于遞歸算法實現(xiàn)倒計時功能的相關(guān)操作技巧,需要的朋友可以參考下

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

效果：

事件：

//發(fā)送驗證碼
$('.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("發(fā)送驗證碼");
    } else {
      $("#countdown").text(time - 1);
      countdown();
    }
  }, 1000);
}

點評：如果time不等于1，就繼續(xù)調(diào)用，同時時間減去一秒。setTimeout也很精髓。直至time減到1為止，移除disabled并更改內(nèi)容為‘發(fā)送驗證碼'。

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

您可能感興趣的文章:

相關(guān)文章

Postman動態(tài)獲取返回值過程詳解
這篇文章主要介紹了Postman動態(tài)獲取返回值過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-06-06
前端無感刷新token的實現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于前端無感刷新token的實現(xiàn)步驟,Axios無感知刷新令牌技術(shù)通過設(shè)置請求攔截器和刷新邏輯,確保API請求不會因令牌過期而中斷,使用訪問令牌和刷新令牌實現(xiàn)自動刷新,需要的朋友可以參考下
2024-11-11
前端知識點之Javascript選擇輸入框confirm用法
這篇文章主要介紹了JavaScript中的confirm方法的基本用法、功能特點、注意事項及常見用途,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下
2025-02-02
仿豬八戒網(wǎng)左下角的文字滾動效果
覺得豬八戒網(wǎng)左下角的文字滾動，效果不錯！自己摸索了一下，以自己的方法實現(xiàn)了！沒有運(yùn)用jQuery,不過用了自己的編寫的Js庫！
2011-10-10
javascript 閉包詳解
這篇文章主要詳細(xì)介紹了javascript 閉包的相關(guān)資料，十分詳盡,需要的朋友可以參考下
2015-02-02
js函數(shù)內(nèi)變量的作用域分析
這篇文章主要介紹了js函數(shù)內(nèi)變量的作用域分析,以實例形式簡單分析了js函數(shù)的變量調(diào)用順序,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
JavaScript庫之vanilla-tilt使用教程(一個平滑的3D傾斜庫)
vanilla-tilt.js是Javascript中一個平滑的3D傾斜庫,可以讓網(wǎng)頁的一些控件變得動態(tài)起來,下面這篇文章主要給大家介紹了關(guān)于JavaScript庫之vanilla-tilt使用的相關(guān)資料,需要的朋友可以參考下
2023-02-02
原生js實現(xiàn)自定義難度的掃雷游戲
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)自定義難度的掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
微信小程序使用image組件顯示圖片的方法【附源碼下載】
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結(jié)合實例形式簡單分析了微信小程序附image組件的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
詳解用原生JavaScript實現(xiàn)jQuery的某些簡單功能
本篇文章主要對用原生JavaScript實現(xiàn)jQuery的某些簡單功能進(jìn)行詳細(xì)全面的講解，具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12