要在按鈕中顯示的jQuery倒計時狀態

在啓用按鈕之前，我正在使用以下代碼倒計時。要在按鈕中顯示的jQuery倒計時狀態

<script type="text/javascript"> 
$.fn.timedDisable = function(time) { 
    if (time == null) { time = 5000; } 
    return $(this).each(function() { 
     $(this).attr('disabled', 'disabled'); 
     var disabledElem = $(this); 
     setTimeout(function() { 
      disabledElem.removeAttr('disabled'); 
     }, time); 
    }); 
}; 

$(function() { 
    $('#btnContinue').timedDisable(); 
}); 
</script>

我怎樣才能獲得按鈕值讀取值=「繼續（X）」，其中X是剩餘，直到它的啓用秒數後，它只是值=「繼續」？

來源

2010-09-22 samJL

如何：

例子：http://jsfiddle.net/mgSVX/2/編輯：（更新爲使用要求的文本值的例子）

$.fn.timedDisable = function(time) { 
    if (time == null) { 
     time = 5000; 
    } 
    var seconds = Math.ceil(time/1000); // Calculate the number of seconds 
    return $(this).each(function() { 
     $(this).attr('disabled', 'disabled'); 
     var disabledElem = $(this); 
     var originalText = this.innerHTML; // Remember the original text content 

      // append the number of seconds to the text 
     disabledElem.text(originalText + ' (' + seconds + ')'); 

     // do a set interval, using an interval of 1000 milliseconds 
     //  and clear it after the number of seconds counts down to 0 
     var interval = setInterval(function() { 
       // decrement the seconds and update the text 
      disabledElem.text(originalText + ' (' + seconds + ')'); 
      if (seconds === 0) { // once seconds is 0... 
       disabledElem.removeAttr('disabled') 
        .text(originalText); //reset to original text 
       clearInterval(interval); // clear interval 
      } 
     }, 1000); 
    }); 
}; 

$(function() { 
    $('#btnContinue').timedDisable(); 
});

來源

2010-09-22 21:11:47 user113716

很好用，謝謝 – samJL 2010-09-23 15:01:39

@Sam - 不客氣。：o） – user113716 2010-09-23 15:03:09

你的小提琴不再活躍。你介意發佈一個新的？ – SISYN 2016-06-02 19:00:55

@ user113716的答案几乎是工作，但我認爲1行代碼丟失，因此無法工作。所以我修改他的代碼如下：（實際上我剛添加1行到他碼）

$.fn.timedDisable = function(time) { 
    if (time == null) { 
    time = 5; 
    } 
    var seconds = Math.ceil(time); // Calculate the number of seconds 
    return $(this).each(function() { 
    $(this).attr('disabled', 'disabled'); 
    var disabledElem = $(this); 
    var originalText = this.innerHTML; // Remember the original text content 

    // append the number of seconds to the text 
    disabledElem.text(originalText + ' (' + seconds + ')'); 

    // do a set interval, using an interval of 1000 milliseconds 
    //  and clear it after the number of seconds counts down to 0 
    var interval = setInterval(function() { 
     seconds = seconds - 1; 
     // decrement the seconds and update the text 
     disabledElem.text(originalText + ' (' + seconds + ')'); 
     if (seconds === 0) { // once seconds is 0... 
     disabledElem.removeAttr('disabled') 
      .text(originalText); //reset to original text 
     clearInterval(interval); // clear interval 
     } 
    }, 1000); 
    }); 
}; 

$(function() { 
    $('#btnContinue').timedDisable(20); 
});

我加入這一行到他的代碼：

seconds = seconds - 1;

和我也刪除「1000」爲第二次計算，因爲我們最好輸入「10」而不是「10000」，以避免錯字和計算錯誤。

這裏的工作演示： https://jsfiddle.net/3esmile/tuwaamcw/1/

希望它幫助。

來源

2016-10-28 06:45:26 3esmile

要在按鈕中顯示的jQuery倒計時狀態

回答

相關問題