你如何写一个动态值

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

的问题是，我需要的值中的一个坐在比其他值

，如果我告诉你我是什么意思

下图显示一个动态生成的“百分比进度条图文并茂可能更容易”。问题在于左边的图片被缩短了，因为百分比只有17％

所以，围绕它的唯一方法是在酒吧中间17％的水煮地点。

下面

是我用来放置数字

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); 
}

我试图修改代码，让我从德蓝clouring放置百分比数字单独的代码，但所有这确实是为了消除颜色。

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

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

这是我调整了上面的代码时发生的情况。

enter image description here

来源

2015-02-10 Paul Kendal

这有什么好用jQuery和一切与CSS做。只需添加一个'文本对齐：中心'到你的'。进度条“，并确保文本的父容器是整个进度栏，而不仅仅是当前的填充。 – Slime 2015-02-10 13:31:18

嗨，我已经把文字对齐到中心。但我如何确保文本父容器是整个进度条？我尝试改变函数，但它没有任何区别：函数setProgressOne（progress，product） var progressBarWidth = progress * $（“。container”）。width（）/ 100; $（“。progressbar”）。html（progress +“％”+ product）; $（“。progressbar”）。width（progressBarWidth）; } – 2015-02-10 13:40:00

在您的图像中，文本的父容器需要是灰色轮廓，而不是蓝色。没有看到HTML，很难给你一个确切的建议。 – Slime 2015-02-10 13:52:37

一种可能的解决方案是具有包含在标签2个div元件。一个出现在进度条“下面”，另一个出现在“上面”。每种样式都可以使文本的样式不同，以便于阅读。然后，您可以使用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/

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

来源

2015-02-10 13:46:09

罗里你好。非常感谢你的帮助。有效 – 2015-02-24 16:32:54

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

ex。

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

来源

2015-02-10 13:46:50

我认为这是怎么回事，如果你把标签在一个单独的标签，查看代码更容易：

<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

来源

2015-02-10 13:57:47 ptrk

你如何写一个动态值

回答

相关问题