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

时间:2015-09-17 22:41:45

标签: jquery css progress-bar

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

enter image description here

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

2 个答案:

答案 0 :(得分: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,展示了它是如何运作的。

答案 1 :(得分:0)

如果您尝试使用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