javascript - Jquery 图形框

Question

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

Answer 1

尝试改变 <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 。小部件。