如何为计票创建进度条答案

【问题标题】：How to create progressbar for counting votes如何为计票创建进度条
【发布时间】：2015-09-17 22:41:45
【问题描述】：

我想创建一个类似 YouTube 的进度条用于计票

其中总票数（“喜欢”加上“不喜欢”）是条形的总宽度，总分（“喜欢”减去“不喜欢”）是绿色部分。现在，条形的宽度必须始终为 100%，也就是说，无论总票数是 500 还是 1000，该数字必须始终为 100%，然后我需要将绿色部分从固定数字转换到百分比，所以，如果总票数是1200（100％）并且喜欢是850（绿色部分），我需要将这850个喜欢转换为百分比，我真的不知道如何解释，但我希望有人可以得到这个想法并帮助我。

【问题讨论】：

问题是？
@Andreas 再次尝试阅读，我需要将喜欢转换为百分比，其中条的总宽度（100%）是喜欢和不喜欢的总和。
我已经阅读了文本，但我只看到了一个要求，没有任何问题或您可能遇到的特定问题。对“jquery progressbar”的简短搜索将为您提供数十万个可能的解决方案/插件/教程

标签： jquery css progress-bar

【解决方案1】：

您需要做的是为每个喜欢和不喜欢的部分创建一个包含 2 个 divs 的包装器，并使用一些 javascript/jquery 来控制它。

HTML

<div class='progressBar'>
     <div class='likes'></div>
     <div class='dislikes'></div>
</div>

CSS

.progressBar {
    display: block;
    width: 100px;
    min-width: 100px;
    height: 10px;
}

.likes {
    background-color: #0F0;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 0px;
    height: 10px;
}

.dislikes {
    background-color: #F00;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 0px;
    height: 10px;
}

JavaScript/jQuery

var likes = 850;
var dislikes = 350;
var total = likes+dislikes;
var likePerc = (likes/total)*100;
var dislikePerc = (dislikes/total)*100;

$(document).ready(function() {
    $(".likes").css("width", likePerc);
    $(".dislikes").css("width", dislikePerc);
});

这是一个jsfiddle，展示了它的工作原理。

【讨论】：

它有效，但唯一的问题是条形宽度始终相同，我需要它是 100% 宽度。
@AndresOrozco 然后根据您的需要更改代码。这是一个示例，说明如何执行您的要求，而不是您可以复制粘贴的内容
好吧好吧，我明白了，我只需要将 % 添加到结果宽度的末尾。非常感谢。

【解决方案2】：

如果您尝试使用 jQuery 来构建它，我建议仅使用 jQuery 来处理百分比计算，并实际使用 HTML 来创建条形图，并使用 CSS 使其响应和美观。

HTML

您想将 2 个动态栏嵌套在父 div 中

<div class="parent">
    <div class="bar up-vote"></div>
    <div class="bar down-vote"></div>
</div>

CSS

要使条具有响应性，您需要将元素的宽度设置为百分比。并通过设置'box-sizing'来确保嵌套的div不会移动

/* set all children to be defined by own border */
.parent *{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.parent{
    width:100%;
    overflow:auto;
    border-radius: 10px;
}
.parent .bar{
    float:left;
    height:20px;
    /* give each bar a default width */
    width:50%;
}
.parent .up-vote{
    background:#35AF3F;
}
.parent .down-vote{
    background:#E24B4B;
}

JS

以静态方式或从传入的任何数据创建变量。

var upVote=764, 
    downVote=236, 
    totalVote,
    upPerc,
    downPerc;

// if you only know upVote and downVote, calculate totalVote
totalVote = upVote + downVote;

// calculate the percentages. Simple division, then multiply by 100
upPerc = 100* (upVote/totalVote);
downPerc = 100* (downVote/totalVote);

// if you want to round the integers to only 2 decimal places,
// use toFixed()   
upPerc = upPerc.toFixed(2);
downPerc = downPerc.toFixed(2);

// overwrite the default widths from the CSS with jQuery .css()
$('.up-vote').css({
    'width':upPerc+'%'
});
$('.down-vote').css({
    'width':downPerc+'%'
});

这是工作响应栏的jsfiddle

【讨论】：