如何创建计数投票的进度条

Question

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

总票数（＆＃34;喜欢＆＃34;加＆＃34;不喜欢＆＃34;）是酒吧的总宽度和总分（＆＃34;喜欢＆＃34;减去＆＃ 34;不喜欢＆＃34;）是绿色部分。 现在，条形的宽度必须始终为100％，这意味着，如果总票数为500或1000并不重要，那么该数字必须始终为100％，然后我需要将该绿色部分转换为固定数字为百分比，因此，如果总票数为1200（100％）且喜欢为850（绿色部分），我需要将这850个喜欢转化为百分比，我真的不知道如何解释，但我希望有人能得到这个想法并帮助我。

Answer 1

您需要做的是为每个喜欢和不喜欢的部分设置一个包含2 div s的包装器，并使用一些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，展示了它是如何运作的。

Answer 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

要使条形图响应，您需要将元素设置为宽度为百分比。 并确保嵌套div不会通过设置'box-sizing'

来移动

/* 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