html - 我如何实际显示 html5 进度中的值和最大值

Question

我正在使用 Html5 进度元素来显示多个任务的进度，但我如何实际显示每个栏上的进度值和最大值。因为它在 10 到 10,000 之间变化很大，所以只显示没有最大值的条是不够的。

<table>
  <tr>
    <td>
      <label for="pb0">
                Processing
            </label>
    </td>
    <td>
      <progress id="pb0">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb1">
                Songs loaded
            </label>
    </td>
    <td>
      <progress id="pb1" value="1415" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb3">
                Songs ignored because already matched
            </label>
    </td>
    <td>
      <progress id="pb3" value="0" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb13">
                Songs updated from Naim metadata 
            </label>
    </td>
    <td>
      <progress id="pb13" value="1141" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb4">
                Songs matched to MusicBrainz release
            </label>
    </td>
    <td>
      <progress id="pb4" value="4" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb5">
                Songs matched to MusicBrainz song only
            </label>
    </td>
    <td>
      <progress id="pb5" value="0" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb14">
                Songs matched to Acoustid song only
            </label>
    </td>
    <td>
      <progress id="pb14" value="0" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb7">
                Songs matched with artwork
            </label>
    </td>
    <td>
      <progress id="pb7" value="619" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb8">
                Songs saved (if not preview)
            </label>
    </td>
    <td>
      <progress id="pb8" value="4" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb11">
                Completed
            </label>
    </td>
    <td>
      <progress id="pb11" value="4" max="17080">
            </progress>
    </td>
  </tr>
  <tr>
    <td>
      <label for="pb12">
                Errors
            </label>
    </td>
    <td>
      <progress id="pb12" value="0" max="17080">
            </progress>
    </td>
  </tr>
</table>
<form action="/check_progress" id="check_progress">
</form>

Answer 1

关于规范化，见下文。至于显示值，有几个选项。我已经包含了一个更新的 Codepen .

事实证明，根据 CSS Tricks，只有 Webkit/Blink 浏览器支持 :after 元素上的 progress 伪元素。 .一种替代方法是在 progress 元素之后附加一个像 span 这样的元素，然后将其绝对定位在您想要的位置(即右边缘)。 CSS 技巧还展示了如果您不想使用 JavaScript，如何在后端完成此操作。

---

我认为@sideroxylon的注释指向答案，使用 ::after 伪元素并引用 value 和 max 属性。

这是一个 Codepen 示例:https://codepen.io/Tombarr/pen/JMbGqM .以及相关代码:

进度::之后{
内容: attr(value) '/' attr(max);
显示: block ；
转换:翻译(105%，0)；
文本对齐:左；
}


如果您的问题是关于值规范化(即将所有指标转换为百分比)，您将需要使用 JavaScript。类似于以下内容:https://codepen.io/Tombarr/pen/goLPVy