如何用HTML/JavaScript在百分比进度条指定位置添加垂直线

把垂直线直接塞到进度条元素的innerHTML里会出现定位偏移问题——因为进度条本身宽度是动态变化的，内部元素的相对定位基准会跟着进度条宽度改变，没法和全局百分比位置对齐。正确做法是把垂直线作为进度条容器的直接子元素，用百分比绝对定位实现1:1精准对齐。

核心修改点 #

• 给进度条外层容器#Progress_Status添加相对定位，作为垂直线的定位基准
• 新增独立的垂直线元素放在容器内，通过left: X%直接绑定目标百分比位置，不受进度条动态宽度影响
• 设置垂直线层级高于进度条，保证始终显示在最上层
• 可通过伪元素在线上方添加对应百分比的文字标注

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
#Progress_Status {
  width: 50%;
  background-color: #ddd;
  position: relative; /* 作为内部标记线的定位参照 */
}

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

/* 垂直线样式 */
.progress-marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #f00;
  z-index: 10;
}

/* 垂直线上方百分比标注 */
.progress-marker::after {
  content: attr(data-percent) '%';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #f00;
}
</style>
</head>
<body>
  <h3>Example of Progress Bar Using JavaScript</h3>
  <p>Download Status of a File:</p>
  <div id="Progress_Status">
    <div id="myprogressBar">1%</div>
    <!-- 垂直线标记，默认设置70%位置和原代码的进度终点对应 -->
    <div class="progress-marker" style="left: 70%" data-percent="70"></div>
  </div>
  <br>
  <button onclick="update()">Start Download</button>

<script>
function update() {
  var element = document.getElementById("myprogressBar");
  var width = 1;
  var identity = setInterval(scene, 10);

  function scene() {
    if (width >= 70) {
      clearInterval(identity);
    } else {
      width++;
      element.style.width = width + '%';
      element.innerHTML = width * 1 + '%';
    }
  }
}

// 动态修改垂直线位置可调用该方法
// function setMarkerPosition(percent) {
//   const marker = document.querySelector('.progress-marker');
//   marker.style.left = percent + '%';
//   marker.dataset.percent = percent;
// }
</script>
</body>
</html>

效果说明 #

• 垂直线位置和百分比数值完全对齐，不会随进度条加载过程出现偏移
• 可通过修改.progress-marker的width、background-color属性调整垂直线粗细、颜色
• 支持同时添加多个垂直线标记不同阈值位置，只需要新增多个.progress-marker元素设置不同left值即可

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