基于列表项填充进度条：为列表B添加双向HTML5进度状态指示

嘿，这个需求很清晰，我帮你搞定了！下面是完整的实现方案，包含HTML、CSS和JavaScript，完全符合你要的进度条展示效果：

HTML结构 #

先搭建基础的页面结构，包含三个列表和两个进度条容器：

<div class="container">
  <div class="list-group">
    <h3>列表A</h3>
    <ul id="listA" class="list">
      <li>项A1</li>
      <li>项A2</li>
      <li>项A3</li>
      <li>项A4</li>
      <li>项A5</li>
    </ul>
  </div>

  <div class="middle-section">
    <div class="progress-container">
      <div class="progress-label">从A移入的项</div>
      <div class="progress-bar">
        <div id="progressA" class="progress-fill left-to-right"></div>
      </div>
    </div>

    <div class="list-group">
      <h3>列表B</h3>
      <ul id="listB" class="list"></ul>
    </div>

    <div class="progress-container">
      <div class="progress-label">从C移入的项</div>
      <div class="progress-bar">
        <div id="progressC" class="progress-fill right-to-left"></div>
      </div>
    </div>
  </div>

  <div class="list-group">
    <h3>列表C</h3>
    <ul id="listC" class="list">
      <li>项C1</li>
      <li>项C2</li>
      <li>项C3</li>
      <li>项C4</li>
      <li>项C5</li>
    </ul>
  </div>
</div>

CSS样式 #

用Flex布局实现横向排列，同时定义进度条的样式，重点处理两个进度条的填充方向：

.container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.list-group {
  flex: 1;
}

.list {
  list-style: none;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.list li {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list li:hover {
  background-color: #f5f5f5;
}

.middle-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.progress-container {
  text-align: center;
}

.progress-label {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}

.progress-bar {
  width: 100%;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.left-to-right {
  background-color: #4CAF50;
  width: 0;
}

.right-to-left {
  background-color: #2196F3;
  margin-left: auto;
  width: 0;
}

JavaScript逻辑 #

处理列表项的点击交互，同时计算并更新进度条的填充状态：

// 获取页面元素
const listA = document.getElementById('listA');
const listB = document.getElementById('listB');
const listC = document.getElementById('listC');
const progressA = document.getElementById('progressA');
const progressC = document.getElementById('progressC');

// 初始总项数（可根据实际列表动态调整）
const totalAItems = listA.children.length;
const totalCItems = listC.children.length;

// 已移入列表B的项数计数器
let movedA = 0;
let movedC = 0;

// 更新进度条的核心函数
function updateProgress() {
  // 计算从A移入的进度百分比
  const progressAPercent = (movedA / totalAItems) * 100;
  progressA.style.width = `${progressAPercent}%`;

  // 计算从C移入的进度百分比
  const progressCPercent = (movedC / totalCItems) * 100;
  progressC.style.width = `${progressCPercent}%`;
}

// 处理列表项点击的通用函数
function handleItemClick(e) {
  if (e.target.tagName === 'LI') {
    const clickedItem = e.target;
    const parentList = clickedItem.parentElement;

    // 克隆项并添加到列表B
    const clonedItem = clickedItem.cloneNode(true);
    listB.appendChild(clonedItem);

    // 移除原列表中的项
    parentList.removeChild(clickedItem);

    // 更新对应计数器
    if (parentList === listA) {
      movedA++;
    } else if (parentList === listC) {
      movedC++;
    }

    // 触发进度条更新
    updateProgress();
  }
}

// 为列表A和C添加点击事件监听
listA.addEventListener('click', handleItemClick);
listC.addEventListener('click', handleItemClick);

关键逻辑说明 #

• 进度条方向控制：第一个进度条（对应A的移入）通过默认的左对齐+宽度变化实现从左到右填充；第二个进度条（对应C的移入）通过margin-left: auto让填充块靠右，再通过宽度变化实现从右到左填充。
• 动态进度计算：每次移入项时，对应计数器加1，用(已移入数量 / 初始总项数) * 100得到百分比，实时更新进度条宽度，并且添加了过渡动画让填充更平滑。
• 交互体验优化：列表项添加了hover效果，点击后克隆项到B并移除原项，逻辑清晰直观。

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