两端延伸的进度条

发布于:

以下是实际效果 UI

完整代码在最底下。

简单的说就是红色部分随着数据占比的增加而延长。思路是用js控制红块的长度。

const lineWidth = line.offsetWidth;
processWidth = (lineWidth * percentage) / 100;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 90vh;
    }

    #container {
      width: 750px;
      height: 700px;
      border: 3px solid black;
      padding: 6px;
    }

    .box {
      margin-top: 5%;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 6%;
      align-items: center;
      padding: auto;
      box-sizing: border-box;
    }

    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      /* border: 2px solid black; */
      background-color: #3f465e;
      width: 70%;
      position: relative;
      height: 1px;
    }

    .process {
      background-color: brown;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      height: 21px;
      width: 2px; /* 默认宽度，将通过JS动态调整 */
      transition: width 0.3s ease;
    }

    .process-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -150%);
      z-index: 30;
    }
  </style>

  <body>
    <div id="container">
      <div class="box">
        <div>甲类</div>
        <div class="line">
          <div class="process-number">23.5%</div>
          <div class="process"></div>
        </div>
        <div>20个</div>
      </div>
      <div class="box">
        <div>乙类</div>
        <div class="line">
          <div class="process-number">67.8%</div>
          <div class="process"></div>
        </div>
        <div>78个</div>
      </div>
      <div class="box">
        <div>丙类</div>
        <div class="line">
          <div class="process-number">0%</div>
          <div class="process"></div>
        </div>
        <div>0个</div>
      </div>
      <div class="box">
        <div>丁类</div>
        <div class="line">
          <div class="process-number">100%</div>
          <div class="process"></div>
        </div>
        <div>300个</div>
      </div>
    </div>
  </body>
  <script>
    function updateProgressBars() {
      // 获取所有的进度条容器
      const lines = document.getElementsByClassName("line");

      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        const processNumberElement = line.querySelector(".process-number");
        const processElement = line.querySelector(".process");

        // 获取百分比数值
        const percentageText = processNumberElement.textContent;
        const percentage = parseFloat(percentageText.replace("%", ""));

        // 获取line容器的宽度（减去边框）
        const lineWidth = line.offsetWidth; // 减去左右边框2px*2

        // 计算进度条宽度
        let processWidth;
        if (percentage === 0) {
          // 0%时显示竖线（2px宽度）
          processWidth = 2;
        } else {
          // 其他情况按比例计算，最小2px，最大95%
          processWidth = Math.max(2, (lineWidth * percentage) / 100);
        }

        // 应用宽度
        processElement.style.width = processWidth + "px";

        console.log(
          `进度条 ${i + 1}: ${percentage}% -> ${processWidth}px (容器宽度: ${lineWidth}px)`
        );
      }
    }

    // 页面加载完成后执行
    document.addEventListener("DOMContentLoaded", updateProgressBars);

    // 如果需要动态更新，可以调用这个函数
    // updateProgressBars();
  </script>
</html>