我想创建一个类似于计票的进度条的YouTube
总票数("喜欢"加"不喜欢")是酒吧的总宽度和总分("喜欢"减去&# 34;不喜欢")是绿色部分。 现在,条形的宽度必须始终为100%,这意味着,如果总票数为500或1000并不重要,那么该数字必须始终为100%,然后我需要将该绿色部分转换为固定数字为百分比,因此,如果总票数为1200(100%)且喜欢为850(绿色部分),我需要将这850个喜欢转化为百分比,我真的不知道如何解释,但我希望有人能得到这个想法并帮助我。
答案 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来使其具有响应性和漂亮性。
您希望将2个动态条形嵌套在父div
中<div class="parent">
<div class="bar up-vote"></div>
<div class="bar down-vote"></div>
</div>
要使条形图响应,您需要将元素设置为宽度为百分比。 并确保嵌套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;
}
静态或从传入的任何数据创建变量。
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