Bootstrap3如何实现进度条每5-10分钟无刷新自动更新

核心修改思路 #

现有代码仅在页面首次加载时执行一次更新，要实现无刷新定时更新，只需要做3处调整：

• 将进度条生成、样式赋值、动画执行的逻辑抽为独立公共函数，支持重复调用
• 每次更新进度条前，先移除元素上已绑定的旧状态类，避免多状态类叠加导致样式异常
• 通过setInterval定时器，按需要的时间间隔（5分钟对应300000毫秒，10分钟对应600000毫秒）重复调用更新函数，页面首次加载时主动调用一次函数保证首屏正常展示

完整实现代码 #

HTML 部分（原有代码无需调整） #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-5">
  <p>进度条1</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <p>进度条2</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <p>进度条3</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
</div>

修改后的 JavaScript 代码 #

// 抽离的进度条更新公共函数
function refreshProgressBar() {
  $(".progress-bar").each(function () {
    // 先移除所有旧的状态类，避免样式冲突
    $(this).removeClass('progress-bar-success progress-bar-warning progress-bar-danger');
    // 生成60-97区间的随机百分比
    const percent = Math.floor((Math.random() * 37) + 60);
    // 更新百分比文本、执行宽度动画
    $(this).html(percent + "%");
    $(this).animate({width: percent + "%"}, 2500);
    // 根据百分比匹配对应状态类
    if (percent < 79) {
      $(this).addClass('progress-bar-danger');
    } else if (percent < 89) {
      $(this).addClass('progress-bar-warning');
    } else {
      $(this).addClass('progress-bar-success');
    }
  })
}

$(document).ready(function() {
  // 页面首次加载时先执行一次
  refreshProgressBar();
  // 设置定时任务，示例为5分钟刷新一次，需要10分钟的话把300000改为600000即可
  setInterval(refreshProgressBar, 300000);
});

配置说明 #

• 进度条状态类对应规则保持和Bootstrap 3官方规则一致：
  • progress-bar-success：绿色，代表成功状态（百分比≥89）
  • progress-bar-warning：黄色，代表警告状态（百分比在79-88区间）
  • progress-bar-danger：红色，代表危险状态（百分比<79）
• 定时间隔可自行调整：时间单位为毫秒，1分钟=60000毫秒，按需修改setInterval的第二个参数即可。

内容的提问来源于stack exchange，提问作者Herlina