使用 JavaScript 实现按百分比递增的响应式进度条-html教程-PHP中文网

使用 JavaScript 实现按百分比递增的响应式进度条

聖光之護

发布： 2025-09-25 20:35:18

原创

251人浏览过

使用 javascript 实现按百分比递增的响应式进度条

本文将介绍如何使用 JavaScript 创建一个响应式进度条，并实现点击按钮后进度条按百分比递增的功能。核心思路是获取容器的宽度，并根据容器宽度计算每次递增的像素值，从而实现按百分比递增的效果。同时，为了保证进度条不超过 100%，我们将添加边界判断。

实现原理

要实现进度条按百分比递增，关键在于理解百分比的含义。进度条的百分比实际上是相对于其父容器宽度的比例。因此，我们需要获取父容器的宽度，然后根据需要递增的百分比计算出对应的像素值，最后将进度条的宽度设置为该像素值。

HTML 结构

首先，我们需要创建 HTML 结构。一个包含进度条的容器和一个按钮：

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<button onclick="increaseProgress()">Click to increase</button>

登录后复制

progress-container 是进度条的容器，progress-bar 是实际显示的进度条，button 用于触发进度条的递增。

立即学习“Java免费学习笔记（深入）”；

CSS 样式

接下来，我们添加 CSS 样式，定义容器和进度条的样式：

.progress-container {
  width: 100%;
  height: 20px;
  outline: solid 2px #ccc;
  border-radius: 20px;
}

.progress-bar {
  width: 0;
  height: inherit;
  background: blue;
  border-radius: 20px;
}

登录后复制

progress-container 的 width: 100% 保证了容器的响应式，会根据父元素的宽度自动调整。progress-bar 的 width: 0 初始化进度条的宽度为 0。

百度GBI

百度GBI-你的大模型商业分析助手

104

查看详情

JavaScript 代码

最后，我们编写 JavaScript 代码来实现进度条的递增功能：

function increaseProgress() {
  var progressBar = document.querySelector(".progress-bar");
  var progressContainer = document.querySelector(".progress-container");

  var barWidth = progressBar.clientWidth;
  var containerWidth = progressContainer.clientWidth;

  if (barWidth >= containerWidth) return;

  progressBar.style.width = (barWidth + containerWidth / 10) + "px";
}

登录后复制

这段代码首先获取进度条和容器的 DOM 元素。然后，获取进度条的当前宽度 barWidth 和容器的宽度 containerWidth。

if (barWidth >= containerWidth) return; 这行代码用于判断进度条是否已经达到 100%，如果是，则直接返回，不再递增。

progressBar.style.width = (barWidth + containerWidth / 10) + "px"; 这行代码是核心部分，它将进度条的宽度设置为当前宽度加上容器宽度的十分之一。这意味着每次点击按钮，进度条都会增加 10%。注意，这里我们将计算结果加上 "px" 单位，因为 style.width 属性需要一个带有单位的值。

注意事项

确保 progress-container 的宽度是可响应的，这样进度条的递增才能正确地基于容器的宽度。
可以根据实际需求调整每次递增的百分比，例如，将 containerWidth / 10 修改为 containerWidth / 20 可以使每次递增 5%。
为了更平滑的过渡效果，可以为 progress-bar 添加 CSS transition 属性。

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
.progress-container {
  width: 100%;
  height: 20px;
  outline: solid 2px #ccc;
  border-radius: 20px;
}

.progress-bar {
  width: 0;
  height: inherit;
  background: blue;
  border-radius: 20px;
  transition: width 0.3s ease; /* 添加过渡效果 */
}
</style>
</head>
<body>

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<button onclick="increaseProgress()">Click to increase</button>

<script>
function increaseProgress() {
  var progressBar = document.querySelector(".progress-bar");
  var progressContainer = document.querySelector(".progress-container");

  var barWidth = progressBar.clientWidth;
  var containerWidth = progressContainer.clientWidth;

  if (barWidth >= containerWidth) return;

  progressBar.style.width = (barWidth + containerWidth / 10) + "px";
}
</script>

</body>
</html>

登录后复制