本文将介绍如何使用 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。
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>总结
通过本文的介绍，我们学习了如何使用 JavaScript 创建一个响应式进度条，并实现按百分比递增的功能。 核心在于理解百分比的含义，并根据容器宽度计算每次递增的像素值。 这种方法可以应用于各种需要显示进度的情况，例如文件上传、任务完成等。
