Question

我动态地将两组值写入一个框中。

问题是我需要其中一个值超过另一个值

如果我告诉你我的意思可能会更容易

下面的两张图片都显示了动态生成的“百分比进度条”。问题是左边的图像缩短了，因为百分比只有17％

所以，唯一的办法就是在酒吧中间的17％Poached to site。

下面是我用来放置数字的代码

enter image description here

<div class="container"><div class="progressbar"></div></div>

function setProgressOne(progress, product)
{             
    var progressBarWidth = progress*$(".container").width()/ 100;  
    $(".progressbar").width(progressBarWidth).html(progress + "% " + product);
}

我试图更改代码以允许我将百分比数字与蓝色填充分开，但它所做的只是消除着色。

function setProgressOne(progress, product)
{             
    var progressBarWidth = progress*$(".container").width()/ 100;  
    $(".progressbar").width(progressBarWidth);

    $(".progressbar").html(progress + "% " + product);
}

当我调整上面的代码时，就会发生这种情况。

enter image description here

Answer 1

一种可能的解决方案是拥有2个包含标签的div个元素。一个出现在＆＃39;之下的进度条和另一个＆＃39;以上＆＃39;它。每种样式都可以使文本的样式不同，以便于阅读。然后，您可以使用CSS clip上部div来适应进度条的宽度。像这样：

<div class="container">
    <div class="message message-under"></div>
    <div class="progressbar"></div>
    <div class="message message-over"></div>
</div>

.container {
    border-radius: 5px;
    border: 1px solid #CCC;
    position: relative;
    height: 30px;
}
.message {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 30px;
}
.message-under {
    color: #333;
    z-index: 5;
}
.progressbar {
    background-color: #C00;
    color: #FFF;
    border-radius: 5px;
    height: 100%;
    position: absolute;
    z-index: 10;
}
.message-over {
    color: #FFF;
    z-index: 15;
}

function setProgressOne(progress, product) {
    var progressBarWidth = progress * $(".container").width() / 100;
    $(".progressbar").width(progressBarWidth);
    $('.message-over').css('clip', 'rect(0px, ' + progressBarWidth + 'px, 30px, 0px)');
    $('.message').html(progress + "% " + product);
}

Working fiddle

更新

这是另一个演示小提琴：http://jsfiddle.net/0LuLhqmb/1/

请注意，我使进度条可拖动，因此您可以更清楚地看到从一种文本样式到另一种文本样式的过渡效果。

Answer 2

您可以通过计算进度条宽度来以编程方式设置字体大小。

离。

 $(".progressbar").css({"font-size":progressBarWidth /100 /<someAmount>})

Answer 3

我认为如果将标签放在单独的标签中会更容易，请参阅代码：

<div id="bar1" class="barBox">
    <div class="barItself"></div>
    <div class="barLabel"></div>
</div>

function setBarValue(containerId, value, msg){
    var $box = $('#'+containerId);
    var $bar = $box.children('.barItself');
    var $label = $box.children('.barLabel');
    var percent = Math.round(100 * value) + '%';
    $bar.width(percent);
    $label.html(percent + ' ' + msg);
}

setBarValue('bar1', 0.3, 'poached');

更具互动性的例子：JSFiddle

你如何写一个动态值

3 个答案: