Jquery 如何创建用于计票的progressbar

我想创建一个类似YouTube的progressbar用于计票

其中总票数（“喜欢”加“不喜欢”）是条的总宽度，总分（“喜欢”减“不喜欢”）是绿色部分。

---

现在，条的宽度必须始终为100%，这意味着，不管总票数是500票还是1000票，这个数字必须始终为100%，然后我需要将绿色部分从一个固定数字转换为一个百分比，因此，如果总票数为1200票（100%），诸如此类的票数为850票（绿色部分），我需要将这850个喜欢转换成一个百分比，我真的不知道如何解释，但我希望有人能理解并帮助我。

您需要做的是为包含的每个喜欢和不喜欢部分提供一个带有2个div的包装器，以及一些javascript/jquery来控制它

HTML

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

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);
});

---

这是一个如何工作的示例。

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

HTML 您希望将两个动态条嵌套在父div中

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

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+'%'
});

---

这是一个正在工作的响应栏

，问题是？@Andreas请再次阅读，我需要将喜欢的内容转换为百分比，其中条的总宽度（100%）是喜欢和不喜欢的内容之和。我已经阅读了文本，但我只看到一个要求，没有问题或您可能遇到的特定问题。对“jquery progressbar”的简短搜索将为您提供数十万种可能的解决方案/插件/教程。这是可行的，但唯一的问题是，条形图的宽度始终相同，我需要它的宽度为100%。@AndresOrozco然后根据您的需要更改代码。这是一个如何执行您的请求的示例，而不是您可以复制的内容好的，我明白了，我只需要在结果宽度的末尾添加%。非常感谢你。

/* 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+'%'
});