像 Kickstarter 这样的 Javascript 长期进度条

Question

我正在寻找可以实现与 Kickstarter 或众筹长期进度条相同效果的解决方案或现有插件。

我在这里找到的现有解决方案都与短期动态进度条有关，这些进度条会向用户显示剩余的百分比或时间。

http://www.jqueryrain.com/demo/jquery-progress-bar/page/2/

http://jqueryui.com/progressbar/

http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/

目前我通过 ajax 调用四个值:

var beginning_value = 0;
var end_value = 6199;
var spent_value = 3000;
var remaining_value = 3199;

当用户点击一个按钮时，spent_value 增加 1 而 remaining_value 减少 1。我只需要在进度条中反射(reflect)这一点。

现在任何解决方案或想法对我来说真的很有帮助。

谢谢

Answer 1

一个基本的进度条可以这样制作:

<div style="height:32px;background:#ccc">
    <div style="height:32px;width:40%;background:blue"></div>
</div>

关键部分是 width:40%，因为这将是进度条的完成百分比。您可以在服务器端代码中定义此宽度。

如果你想让 JavaScript 更新它，你需要做的就是获取内部的 div(也许通过给它一个你可以选择的 ID)并设置它的 .style.width 到新的百分比。