Question

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

＆＃13;

<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>

＆＃13;

Answer 1

关于规范化，请参见下文。至于显示值，有几个选项。我已添加了更新的Codepen。

事实证明，只有Webkit / Blink浏览器支持每CSS Tricks个:after元素上的progress个伪元素。另一种方法是在span元素之后附加progress之类的元素，然后将其绝对定位在您想要的位置（即右边缘）。 CSS Tricks还展示了如果您不想使用JavaScript，如何在后端完成此任务。

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

~~以下是Codepen示例：https://codepen.io/Tombarr/pen/JMbGqM。以及相关代码：~~

~~progress::after { content: attr(value) ' / ' attr(max); display: block; transform: translate(105%, 0); text-align: left; }~~

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

Answer 2

HTML5的进展限制了在其上显示数据的选项。但是，您可以通过添加第3列来手动显示数据：

<tr> <td> <label for="pb1"> Songs loaded </label> </td> <td> <progress id="pb1" value="1415" max="17080"> </progress> </td> <td> <span>1415 / 17080</span> (8.2%) </td> </tr>

或者您可以使用bootsrap进度条获取其他选项，只需添加此引导链接：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 在您的代码上并使用下面的示例代码：

<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1415" aria-valuemin="0" aria-valuemax="17080" style="width:8.2%"> 8.2% Complete </div> </div>

Answer 3

你可以通过使用jQuery来实现，我做了一个简单的例子来向你展示一种可能的方式：

＆＃13;

$('progress').each(function(){
   
      var val = parseInt($(this).prop('value'));
      var max = parseInt($(this).prop('max'));

      var percent = (val / max) * 100;
      
      $('.perc').append('<p>' + percent + '%</p>');
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="15" max="110"></progress>
<progress value="26" max="91"></progress>
<progress value="16" max="80"></progress>
<div class="perc"></div>

＆＃13;

Answer 4

您可以像下面一样设置进度条的样式，并使用:after显示值。

body {
  font: 13px verdana
}

label {
  display: block;
}

progress:after {
  content: attr(value) "/" attr(max);
  position: absolute;
  left: 105%;
  top: 0;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of default border in Firefox. */
  border: none;
  appearance: none;
  height: 20px;
  padding: 1px;
  border: 1px solid #bbbbbb;
  background-color: #e6e6e6;
  position: relative;
  border-radius: 2px;
}

progress[value]::-webkit-progress-value {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, #00b01e), color-stop(66%, #66da6d), to(#1bc040));
  background-image: linear-gradient(to right, #00b01e 33%, #66da6d 66%, #1bc040 100%);
  border-radius: 2px;
}

progress[value]::-webkit-progress-bar {
  background-color: #e6e6e6;
  border-radius: 2px;
}

<table>
  <tr>
    <td>
      <label for="pb0">Processing</label>
    </td>
    <td>
      <progress id="pb0" value="17080" max="17080"></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>

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

4 个答案: