我正在尝试制作一个如下图所示的简单图表。例如,如果您指定该值为 50%,它将覆盖矩形框的 50%。我似乎无法想出一种方法来处理编码?有人可以帮助我吗? :)
最佳答案
尝试改变 <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
。小部件。
关于javascript - Jquery 图形框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17375463/