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 ネイティブの進行状況要素を使用してください。