javascript - Jquery 图形框

Question

我正在尝试制作如下图所示的简单图表。例如，如果您指定值为 50 % ，它将覆盖 50% 的矩形框。我似乎无法找到一种方法来处理编码？有人可以帮我吗？:)

Answer 1

尝试将 a 的宽度更改为<div>百分比。

HTML

<div class="percentage-box-wrapper">
  <div class="percentage-box" id="percentage-box-1"></div>
</div>

CSS

.percentage-box-wrapper {
  border: 1px solid #000;
  height: 18px;
  width: 160px;
}

.percentage-box {
  background: #000;
  height: 100%;
  width: 0px;
}

Javascript

function setBox1Percentage(percent) {
  document.getElementById('percentage-box-1').style.width = percent + '%';
}

setBox1Percentage(60);

看看这个工作JSFiddle。

上面的代码是做你想做的事的自定义方式。但是，如果您不想重新发明轮子，可以考虑使用 jQuery UI 的Progressbar小部件。

Answer 2

请改用HTML5 原生进度元素。