用js语言写一个进度条按钮

以下是一个使用 JavaScript 和 HTML/CSS 创建的简单进度条按钮示例：

HTML 代码：

<button onclick="startProgress()">开始进度条</button>
<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>

CSS 代码：

#progressBarContainer {
  width: 200px;
  height: 20px;
  background-color: #eee;
  margin-top: 10px;
}
#progressBar {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

JavaScript 代码：

function startProgress() {
  var progressBar = document.getElementById("progressBar");
  var width = 0;
  var interval = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      progressBar.style.width = width + '%';
    }
  }
}

解释：

- HTML 代码中包含一个按钮和一个用于包装进度条的 `<div>` 元素。
- CSS 代码中定义了进度条和进度条容器的样式。
- JavaScript 代码中定义了一个名为 `startProgress()` 的函数，它将启动进度条的动画。
- `startProgress()` 函数使用 `setInterval()` 方法在每个 10 毫秒的时间间隔内执行 `frame()` 函数，直到进度条宽度达到 100% 或用户停止进度条。
- `frame()` 函数每次将进度条的宽度增加 1%，直到宽度达到 100% 为止。