如何同时为多个进度条设置动画?
How to animate multiple progress bars at the same time?
我需要为我的数据库中的不同元素制作一个进度条。我的数据库中目前有 4 个项目,每个项目都有一个关联的进度条。
我正在使用 ASP.Net Core (MVC),其中我有一个名为 Server 的 class,它具有两个属性:ComputerName 和 Type。
这里是 html 创建多个进度条的代码:
<div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
<div id="serverName">@server.ComputerName</div>
<div class="progress">
<div id="myProgress" class="bar bar-danger"></div>
</div>
}
</div>
这里是 javascript 代码:
$('.progress').each(函数(){
var bar = document.getElementById("myProgress");
var progress = 0;
function setProgress(percent) {
bar.style.width = percent + "%";
if (percent < 30) {
bar.className = "progress-bar progress-bar-danger progress-bar-striped active";
} else if (percent >= 30 && percent < 70) {
bar.className = "progress-bar progress-bar-warning progress-bar-striped active";
} else if (percent >= 70 && percent < 80) {
bar.className = "progress-bar progress-bar-info progress-bar-striped active";
} else if (percent >= 80 && percent < 100) {
bar.className = "progress-bar progress-bar-success progress-bar-striped active";
} else if (percent == 100) {
bar.className = "progress-bar progress-bar-success";
}
}
var interval = setInterval(
function () {
setProgress(++progress);
if (progress == 100) window.clearInterval(interval);
}, 100);
});
注意:现在我不担心每个进度条的百分比,我只想确保所有进度条都是动画的
这是输出:
其中只有一个是动画的。为什么会这样?
id
s 必须是唯一的。相反,给每个进度条一个 class 和 select 它与 querySelector
.
HTML:
<div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
<div class="serverName">@server.ComputerName</div>
<div class="progress">
<div class="myProgress bar bar-danger"></div>
</div>
}
</div>
JS:
$('.progress').each(function () {
var bar = this.querySelector(".myProgress");
var progress = 0;
function setProgress(percent) {
bar.style.width = percent + "%";
if (percent < 30) {
bar.className = "myProgress progress-bar progress-bar-danger progress-bar-striped active";
} else if (percent >= 30 && percent < 70) {
bar.className = "myProgress progress-bar progress-bar-warning progress-bar-striped active";
} else if (percent >= 70 && percent < 80) {
bar.className = "myProgress progress-bar progress-bar-info progress-bar-striped active";
} else if (percent >= 80 && percent < 100) {
bar.className = "myProgress progress-bar progress-bar-success progress-bar-striped active";
} else if (percent == 100) {
bar.className = "myProgress progress-bar progress-bar-success";
}
}
var interval = setInterval(
function () {
setProgress(++progress);
if (progress == 100) window.clearInterval(interval);
}, 100);
});
我需要为我的数据库中的不同元素制作一个进度条。我的数据库中目前有 4 个项目,每个项目都有一个关联的进度条。 我正在使用 ASP.Net Core (MVC),其中我有一个名为 Server 的 class,它具有两个属性:ComputerName 和 Type。
这里是 html 创建多个进度条的代码:
<div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
<div id="serverName">@server.ComputerName</div>
<div class="progress">
<div id="myProgress" class="bar bar-danger"></div>
</div>
}
</div>
这里是 javascript 代码:
$('.progress').each(函数(){
var bar = document.getElementById("myProgress");
var progress = 0;
function setProgress(percent) {
bar.style.width = percent + "%";
if (percent < 30) {
bar.className = "progress-bar progress-bar-danger progress-bar-striped active";
} else if (percent >= 30 && percent < 70) {
bar.className = "progress-bar progress-bar-warning progress-bar-striped active";
} else if (percent >= 70 && percent < 80) {
bar.className = "progress-bar progress-bar-info progress-bar-striped active";
} else if (percent >= 80 && percent < 100) {
bar.className = "progress-bar progress-bar-success progress-bar-striped active";
} else if (percent == 100) {
bar.className = "progress-bar progress-bar-success";
}
}
var interval = setInterval(
function () {
setProgress(++progress);
if (progress == 100) window.clearInterval(interval);
}, 100);
});
注意:现在我不担心每个进度条的百分比,我只想确保所有进度条都是动画的
这是输出:
其中只有一个是动画的。为什么会这样?
id
s 必须是唯一的。相反,给每个进度条一个 class 和 select 它与 querySelector
.
HTML:
<div class="container">
<h2>Patch Management Progress</h2>
@foreach (var server in Model)
{
<div class="serverName">@server.ComputerName</div>
<div class="progress">
<div class="myProgress bar bar-danger"></div>
</div>
}
</div>
JS:
$('.progress').each(function () {
var bar = this.querySelector(".myProgress");
var progress = 0;
function setProgress(percent) {
bar.style.width = percent + "%";
if (percent < 30) {
bar.className = "myProgress progress-bar progress-bar-danger progress-bar-striped active";
} else if (percent >= 30 && percent < 70) {
bar.className = "myProgress progress-bar progress-bar-warning progress-bar-striped active";
} else if (percent >= 70 && percent < 80) {
bar.className = "myProgress progress-bar progress-bar-info progress-bar-striped active";
} else if (percent >= 80 && percent < 100) {
bar.className = "myProgress progress-bar progress-bar-success progress-bar-striped active";
} else if (percent == 100) {
bar.className = "myProgress progress-bar progress-bar-success";
}
}
var interval = setInterval(
function () {
setProgress(++progress);
if (progress == 100) window.clearInterval(interval);
}, 100);
});