Question

我使用CSS创建了一个简单的水平条形图，因为我只需要3个条形图。此图显示3个分数 - 前两个是动态的，最后一个是静态的。

我的问题是我无法找到一种根据它们的值来改变条形宽度的有效方法。我对每种类型的条件都有太多的IF语句（即，如果分数A大于分数B但分数A小于分数C，等等）。我该如何简化这个？

我的代码示例可见 Field name cannot contain ‘.’ 。注意：如果条形图似乎不正确，那是因为这些类型的分数不存在条件。请再次运行代码，直到所有条形看起来都是水平的。

HTML：

<div class="graph">
  <span id="score-a">Score A: </span>
  <span id="score-b">Score B: </span>
  <span id="score-c">Score C: 5</span>
</div>

JS：

var randomNumberA = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
var randomNumberB = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
var staticScore = 5;

document.getElementById('score-a').innerHTML = "Score A: " + randomNumberA;
document.getElementById('score-b').innerHTML = "Score B: " + randomNumberB;

if (randomNumberA > randomNumberB && randomNumberA > staticScore) {
  $('#score-a').css({
    'width': "auto",
    'min-width': '100px'
  });
  $('#score-b').css({
    'width': "auto",
    'min-width': '122px'
  });
  $('#score-c').css({
    'width': "auto",
    'min-width': '112px'
  });
}

if (randomNumberA < randomNumberB && randomNumberA > staticScore) {
  $('#score-a').css({
    'width': "auto",
    'min-width': '100px'
  });
  $('#score-b').css({
    'width': "auto",
    'min-width': '122px'
  });
  $('#score-c').css({
    'width': "auto",
    'min-width': '112px'
  });
}

Answer 1

您可以使用vw代替if条件。请检查一下： jsfiddle.net/uu9m1s3s/1

Answer 2

查看this fiddle

它计算相对于最大分数的宽度。

var maxScore = Math.max(randomNumberA, randomNumberB, staticScore);
var maxWidth = 130;

var widthA = (randomNumberA / maxScore) * maxWidth;
$('#score-a').css({
    'width': widthA + 'px'
});
var widthB = (randomNumberB / maxScore) * maxWidth;
$('#score-b').css({
    'width': widthB + 'px'
});
var widthC = (staticScore / maxScore) * maxWidth;
$('#score-c').css({
    'width': widthC + 'px'
});

我不了解你对flexbox的使用。这是导致你的酒吧彼此相邻的原因。我修改了你的CSS，这样就不会发生了。

动态更新CSS条形图的宽度

2 个答案: