如何制作以px为宽度单位的自适应增量ProgressBar？

核心思路是用比例而非固定px值维护进度，这样不管容器宽度怎么变，进度增量的相对比例一致，自动适配容器尺寸变化。

实现步骤 #

• 维护一个0_{1之间的进度比例值（对应0%}100%进度）
• 增量操作直接修改这个比例值（比如每次加0.002，对应0.2%的进度）
• 实时获取容器的当前宽度，用「比例值 × 容器宽度」计算进度条的实际px宽度
• 监听窗口resize事件，容器宽度变化时自动更新进度条显示

修改后的代码 #

HTML（保持原结构即可） #

<div class="progress-line-body" style="width: 1309.8px;">
  <div class="progress-value" id="sampleid" style="width: 50px;"> 
  </div>
</div>

JavaScript #

// 初始化元素和进度变量
const $progressContainer = $('.progress-line-body');
const $progressBar = $('#sampleid');
// 进度比例（0~1，对应0%~100%）
let progressRatio = 50 / $progressContainer.width(); // 从初始50px换算成比例
// 固定比例增量（比如每次增加0.2%进度）
const ratioIncrement = 0.002;

// 更新进度条宽度的函数
function updateProgressBar() {
  const containerWidth = $progressContainer.width();
  // 计算当前进度条的px宽度
  const barWidth = progressRatio * containerWidth;
  $progressBar.css('width', `${barWidth}px`);
}

// 增量操作函数（比如点击按钮或者定时调用）
function incrementProgress() {
  // 确保进度不超过100%
  if (progressRatio >= 1) return;
  progressRatio += ratioIncrement;
  updateProgressBar();
}

// 监听窗口resize，自动更新进度条
$(window).on('resize', updateProgressBar);

// 示例：每隔100ms执行一次增量
setInterval(incrementProgress, 100);

关键说明 #

• 初始进度比例从原有的50px换算而来，保证初始状态和原代码一致
• 比例增量ratioIncrement可以根据需求调整（比如0.01对应1%进度），不用再随容器宽度改数值
• resize事件触发时自动重新计算宽度，完美适配窗口或容器尺寸变化
• 避免了直接操作px值带来的适配问题，逻辑更清晰

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