进度条用于描述正在执行的任何任务的进度。进度条通常用于显示下载和上传状态。换句话说, 我们可以说, 进度条可用于描述正在进行中的任何事物的状态。
要使用JavaScript创建基本的进度栏, 需要执行以下步骤：
为进度栏创建HTML结构:
下面的代码包含两个名为" Progress_Status"和" myprogressbar"的" div"标签元素。
<div id = "Progress_Status">
<div id = "myprogressBar"></div>
</div>添加CSS
:
下面的代码用于设置进度条的宽度和背景颜色以及进度条中的进度状态。
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}:
下面的代码使用javascript函数" update"和" scene"创建了一个动态进度条(动画)。
<script>
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width>= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
</script>链接HTML, CSS和JavaScript元素
下面的程序显示了链接上面的HTML, CSS和JavaScript代码的进度条的完整代码：
<!DOCTYPE html>
<html>
<style>
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 2%;
height: 20px;
background-color: #4CAF50;
}
</style>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id = "Progress_Status">
<div id = "myprogressBar"></div>
</div>
<br>
<button onclick = "update()">Start Download</button>
<script>
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width>= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
}
}
}
</script>
</body>
</html>输出：
单击"开始下载"按钮后, 可以看到进度条中的进度动画。
创建带有标签的进度条
要添加数字标签以指示用户在过程中的距离, 需要在进度条的内部或外部添加新元素, 以显示进度状态。
要添加标签, 请在" myprogressbar"元素中的上述代码中进行以下更改。
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}在"更新"和"场景"功能中进行以下更改, 以使数字标签与进度条中的进度一起更新。
<script>
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width>= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
</script>以下是使用HTML, CSS和JavaScript创建带有标签的进度栏的完整程序：
<!DOCTYPE html>
<html>
<style>
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
</style>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id = "Progress_Status">
<div id = "myprogressBar">1%</div>
</div>
<br>
<button onclick = "update()">Start Download</button>
<script>
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width>= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>输出：
