javascript - 倒计时完成后用按钮替换进度条

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