jQuery倒计时状态显示在按钮中

Question

我正在使用以下代码，在启用按钮之前进行倒计时。

<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>

我该如何获取按钮的值，使其读取value="Continue (x)"，其中x是禁用剩余时间的秒数，之后变为value="Continue"？

- samJL

Answer 1

这个怎么样：

示例：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();
});​

- user113716

---

您的小提琴不再活跃。您介意发布一个新的吗？ - SISYN

我认为您忘记了减少秒数。 - Ray Jowa

你在 var interval = setInterval(function() { 中漏掉了 seconds--;。 - Masoud Keshavarz

Answer 2

@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/ 希望对您有所帮助。

- 3esmile