用js语言写一个进度条按钮
时间: 2023-03-21 20:00:55 浏览: 80
以下是一个使用 JavaScript 和 HTML/CSS 创建的简单进度条按钮示例:
HTML 代码:
```html
<button onclick="startProgress()">开始进度条</button>
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
```
CSS 代码:
```css
#progressBarContainer {
width: 200px;
height: 20px;
background-color: #eee;
margin-top: 10px;
}
#progressBar {
width: 0%;
height: 100%;
background-color: #4CAF50;
}
```
JavaScript 代码:
```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% 为止。