如何创建计票进度条

Question

我想创建一个类似 YouTube 的进度条来计算选票

其中总票数（"likes"加"dislikes"）是条的总宽度，总分（"likes"减"dislikes"）是绿色部分。现在，条形的宽度必须始终为 100%，这意味着无论总票数是 500 还是 1000，该数字必须始终为 100%，然后我需要将绿色部分从固定数字转换到一个百分比，所以，如果总票数是1200（100%），点赞是850（绿色部分），我需要把这850个点赞转换成百分比，我真的不知道怎么解释，但我希望有人可以得到想法并帮助我。

Answer 1

您需要做的是为包含的每个喜欢和不喜欢的部分创建一个包含 2 div 的包装器和一些 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

要使栏响应，您需要将元素的宽度设置为百分比。并通过设置 '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

如何创建计票进度条

How to create progressbar for counting votes

css

jquery

progress-bar

HTML

CSS

JS