求助：基于Bootstrap 4创建带多控制按钮的动画进度条

嘿，作为前端新手能想到这么多功能点已经超棒啦！我帮你整理了一套清晰易读的代码，完全基于Bootstrap 4的进度条和按钮组件，把你需要的所有功能都整合进去了，代码结构也尽量简洁好懂，你可以直接拿去用或者跟着修改~

完整代码实现 #

HTML结构 #

先把界面元素按逻辑布局，用Bootstrap的网格和组件类快速搭建样式：

<div class="container mt-5">
  <h3>交互式进度条</h3>
  <!-- 进度条区域 -->
  <div class="progress mb-3" style="height: 30px;">
    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
  </div>

  <!-- 控制按钮组 -->
  <div class="btn-group mb-3" role="group">
    <button id="startBtn" type="button" class="btn btn-success">自动启动</button>
    <button id="stopBtn" type="button" class="btn btn-warning">停止</button>
    <button id="resetBtn" type="button" class="btn btn-danger">重置</button>
    <button id="getValueBtn" type="button" class="btn btn-info">查看当前进度</button>
  </div>

  <!-- 进度设置区域 -->
  <div class="input-group mb-3">
    <button id="decreaseBtn" type="button" class="btn btn-secondary">-</button>
    <input type="number" id="progressInput" class="form-control text-center" min="0" max="100" value="0">
    <button id="increaseBtn" type="button" class="btn btn-secondary">+</button>
    <button id="setProgressBtn" type="button" class="btn btn-primary ml-2">设置进度</button>
  </div>
</div>

CSS自定义样式（可选） #

加一点小样式让界面更美观，不用也不影响核心功能：

.progress-bar {
  font-size: 16px;
  line-height: 30px;
}

.input-group .form-control {
  max-width: 120px;
}

JavaScript逻辑 #

这部分是核心，处理所有按钮交互和进度条动画逻辑：

// 获取DOM元素
const progressBar = document.getElementById('progressBar');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resetBtn = document.getElementById('resetBtn');
const getValueBtn = document.getElementById('getValueBtn');
const decreaseBtn = document.getElementById('decreaseBtn');
const increaseBtn = document.getElementById('increaseBtn');
const progressInput = document.getElementById('progressInput');
const setProgressBtn = document.getElementById('setProgressBtn');

// 全局变量：存储动画定时器ID、当前进度值
let progressInterval = null;
let currentProgress = 0;

// 更新进度条显示的通用函数
function updateProgressBar(value) {
  // 确保进度值始终在0-100的合法区间内
  currentProgress = Math.max(0, Math.min(100, value));
  progressBar.style.width = `${currentProgress}%`;
  progressBar.setAttribute('aria-valuenow', currentProgress);
  progressBar.textContent = `${currentProgress}%`;
  progressInput.value = currentProgress;
}

// 自动递增进度的函数
function autoIncreaseProgress() {
  // 避免重复启动多个定时器
  if (progressInterval) clearInterval(progressInterval);
  // 每100毫秒增加1%进度
  progressInterval = setInterval(() => {
    updateProgressBar(currentProgress + 1);
    // 进度到100%时自动停止
    if (currentProgress >= 100) {
      clearInterval(progressInterval);
      progressInterval = null;
    }
  }, 100);
}

// 绑定各按钮的事件监听
startBtn.addEventListener('click', autoIncreaseProgress);

stopBtn.addEventListener('click', () => {
  if (progressInterval) {
    clearInterval(progressInterval);
    progressInterval = null;
  }
});

resetBtn.addEventListener('click', () => {
  stopBtn.click(); // 先停止动画
  updateProgressBar(0);
});

getValueBtn.addEventListener('click', () => {
  alert(`当前进度值：${currentProgress}%`);
});

decreaseBtn.addEventListener('click', () => {
  updateProgressBar(currentProgress - 1);
});

increaseBtn.addEventListener('click', () => {
  updateProgressBar(currentProgress + 1);
});

setProgressBtn.addEventListener('click', () => {
  const inputValue = parseInt(progressInput.value);
  // 校验输入是否为有效数字
  if (!isNaN(inputValue)) {
    updateProgressBar(inputValue);
  } else {
    alert('请输入0-100之间的有效数字！');
    progressInput.value = currentProgress; // 恢复当前合法值
  }
});

// 输入框回车也能触发设置进度
progressInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    setProgressBtn.click();
  }
});

关键功能说明 #

• 自动启停控制：用setInterval实现进度递增，clearInterval终止动画，避免重复启动多个定时器导致进度跳变
• 边界合法性保障：updateProgressBar函数通过Math.max和Math.min强制进度值在0-100之间
• 输入校验：设置进度时会检查输入是否为有效数字，避免非法值破坏界面状态
• 状态同步：所有操作都会同步更新进度条、输入框的显示，保证界面状态一致

你只需要在HTML文件里引入Bootstrap 4的CSS和JS资源，就能直接运行这段代码看到完整效果啦！如果有哪里看不懂或者需要调整细节，随时折腾就好~

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