倒计时结束后，用按钮替换进度条

Question

我想在倒计时结束后用按钮替换进度条 所以我使用这段代码

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " sec ");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
    $('#progressBar').replaceWith('<button>Save Me</button>');
};
progress(20, 20, $('#progressBar'));

但倒计时结束后按钮没有出现，请您检查代码

Answer 1

在计时器完成后，您需要调用replaceWith 。在您的示例中，您可以使用else语句执行此操作：

if (timeleft > 0) {
    setTimeout(function() {
        progress(timeleft - 1, timetotal, $element);
    }, 1000);
} else {
    $('#progressBar').replaceWith('<button>Save Me</button>')
}

Here is a working example（我使用了上一个问题中的HTML和CSS）。