設定進度條的自訂範圍
P粉567112391
P粉567112391 2024-02-26 18:59:45
0
1
381

我的進度條現在會以百分比運行。我想將其從 % 更改為範圍刻度。

分鐘: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;
}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板