如何实现progress bar随currentCount值变化实时自动更新

需求说明 #

我有一个基于currentCount的进度条，后续计划将currentCount替换为可自动增长的数值变量，目前暂用静态值850示例。目标值通过输入框#q10设置（当前值1000，可随时修改）。当前进度条仅在点击.postbtn按钮时更新，需要实现：

• 进度条随currentCount的数值变化实时自动更新
• 进度基于设置的目标值计算，最大为100%

修改后的JavaScript代码 #

$(document).ready(function() {
  // 全局变量存储当前数值，后续可替换为自动增长的数据源
  let currentCount = 850;
  // 缓存目标值输入框元素，提升性能
  const targetInput = $('#q10');

  // 统一更新进度条的核心函数
  function updateProgressBar() {
    const targetValue = parseInt(targetInput.val()) || 0;
    // 处理目标值为0的边界情况，避免除以0错误
    if (targetValue <= 0) {
      $("#myBar").width('0%');
      $("#label").text('0%');
      return;
    }
    // 计算进度，确保不超过100%
    let progress = Math.min((currentCount / targetValue) * 100, 100);
    // 更新进度条宽度和文本
    $("#myBar").width(progress + '%');
    $("#label").text(Math.round(progress) + '%');
  }

  // 点击设置按钮时更新进度
  $(".postbtn").on('click', updateProgressBar);

  // 监听目标值输入框的实时变化，修改目标值时自动更新进度
  targetInput.on('input', updateProgressBar);

  // 模拟currentCount自动增长（后续可替换为真实的业务逻辑，比如接口推送数据）
  setInterval(() => {
    const targetValue = parseInt(targetInput.val()) || 0;
    // 未达到目标值时持续增长
    if (currentCount < targetValue) {
      currentCount += 10; // 每次增长的数值，可根据需求调整
      updateProgressBar();
    }
  }, 500); // 增长间隔时间（毫秒），可调整快慢

  // 页面初始化时自动加载进度
  updateProgressBar();
});

修改后的CSS代码 #

#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.3s ease; /* 添加平滑过渡动画 */
}

#label {
  width: 100%;
  text-align: center;
  line-height: 30px;
  color: white;
}

最终HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Total likes target:<br>
<input type="text" name="Total" id="q10" value="1000"><br> <br>
<input class="postbtn" style="width: auto; font-size: 16px;" type="button" value="Set Target">
<br><br><div id="myProgress">
  <div id="myBar">
    <div id="label">&nbsp;0%</div>
  </div>
</div>

关键改动说明 #

• 全局变量与统一函数：将currentCount设为全局变量，提取updateProgressBar统一处理进度计算和DOM更新，减少重复代码，便于维护。
• 实时监听目标值：通过input事件监听目标值输入框的变化，修改目标值时立即更新进度条。
• 自动增长模拟：用setInterval模拟currentCount的自动增长，后续可直接替换为真实的数据源更新逻辑（比如WebSocket推送、定时接口请求）。
• 边界处理：增加目标值为0的异常处理，避免除以0错误；限制进度不超过100%，符合业务逻辑。
• 用户体验优化：添加进度条宽度的过渡动画，让更新更平滑；进度文本取整显示，更直观。
• 初始化自动加载：页面加载完成后自动调用更新函数，无需手动点击按钮即可显示初始进度。

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