Javascript长期进度条像Kickstarter

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.我只需要在进度条中反映这一点。

现在任何解决方案或想法都对我有用。

由于

Answer 1

1. 使用您自己已为基本代码提供的第三个链接。
2. 您不需要所有这些变量。起始值始终为零。您只需要结束值和剩余价值。
3. 提供给进度条的百分比为（remaining_value / end_value）* 100

Answer 2

基本进度条可以这样制作：

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

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

如果您希望JavaScript更新它，您需要做的就是获取内部div（可能通过给它一个您可以选择的ID）并将其.style.width设置为新的百分比。< / p>