jquery - 如何创建计票进度条

Question

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

其中总票数(“喜欢”加“不喜欢”)是条形的总宽度，总分(“喜欢”减去“不喜欢”)是绿色部分。现在，条形的宽度必须始终为 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展示它是如何工作的。