Javascript 使用进度条添加文本消息

因此，我尝试在进度条上方添加两条文本消息

我想要一份“核对答案”的复印件在进度条的正上方

然后我要“批准！”替换“检查您的答案！”一旦酒吧达到100%

下面是我为我的酒吧实现的代码

前

加价

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;"></div>

这里有一个选项：

var progress = setInterval(function() {
  var $bar = $('.bar');
  if ($bar.width()==400) {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#announcement").text("Approved!");
  } else {
      $bar.width($bar.width()+40);
  }
  $bar.text($bar.width()/4 + "%");
}, 900);

使用此HTML：

<div id="announcement">Checking your answers!</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>

检查您的答案！

---

这是一个。

请同时发布进度条的HTML

var progress = setInterval(function() {
  var $bar = $('.bar');
  if ($bar.width()==400) {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#announcement").text("Approved!");
  } else {
      $bar.width($bar.width()+40);
  }
  $bar.text($bar.width()/4 + "%");
}, 900);

<div id="announcement">Checking your answers!</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>