设置进度条的自定义范围
P粉567112391
P粉567112391 2024-02-26 18:59:45
0
1
412

我的进度条现在按百分比运行。我想将其从 % 更改为范围刻度。

分钟:0 最大:10

这适用于%:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="progress">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>

但我想将其从 % 更改为值范围。

##更新

具有 aria-value 的东西不起作用。我不知道为什么。

我找到了一个解决方案,我根据我的回复计算了百分比:

var calculations = data[1] / 10 * 100

P粉567112391
P粉567112391

全部回复(1)
P粉588152636

您可以将 style="width: 100%" 更改为您想要的任何%,这不是条形的%,而是内部蓝色条形的宽度。看来您正在使用 Bootstrap。您可以在此处阅读有关此进度条的信息: https://getbootstrap.com/docs/5.1/组件/进度/

您还可以为您的栏提供 aria 属性,您可以为其提供最小值和最大值。 (也可以在上面的链接中看到)

例如:aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

.progress{
  width: 300px;
  margin: 20px;
}

aria 值的示例(从 Bootstrap 文档复制):

.progress{
  margin: 20px;
  width: 300px;
}

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板