Question

我想在我的按钮内进行5秒钟的倒计时，这样你就可以看到在我点击按钮后提交一些内容之前剩下多少时间。我从HTML标签中的“数据延迟”中得到了他必须倒数的值

});

Answer 1

演示我想你想要的东西：http://jsfiddle.net/Lp99cw3q/2/

首先，

var b = $(button);

无效，我假设您想要访问按钮属性，请使用：

var b = $('#first');

然后，您可以使用b来访问所需的一切，例如：

var text = b.attr('value');

如果你想在点击时调用定时器功能：

$('#first').click(function() {
    timer();
});

然后我会这样设置：

function timer(){   
   setTimeout(function(){
       b.val(text + ' ' + counter);   // update the text with the counter
       b.attr('data-delay', counter); // update the attribute holding the value
       if (counter == 0) {next();}    // if finished, call next function
       else {counter--; timer();}     // decrease the counter and call the timer again after 1s
   },1000);
}

function next() {
    b.val('Done!');
    //whatever happens afterwards
}

Answer 2

以下是更新后的工作代码。

<input type="button" value="Submit and wait!" id="first" data-delay="5"></input>


var button = $('#first');
var counter = button.attr('data-delay');
var text = button.attr('value');
function timer() {
    button.val(text+' '+counter);
    if (counter == 0) {
        clearInterval(countdownTimer);
        button.val("TimeOut");
    } else {
        counter--;
    }
}

var countdownTimer = setInterval('timer()', 1000);

如何在按钮内倒数？

2 个答案: