getJSON 更新进度条答案

【问题标题】：getJSON to update progress bargetJSON 更新进度条
【发布时间】：2015-08-07 19:22:56
【问题描述】：

尝试在 Bootstrap 上获取此进度条以显示来自 JSON API 的实时进度，同时还显示已实现目标的百分比：

这是它现在的样子：http://puu.sh/jt2Gu/823f6a6a0f.png

两个进度条都应该在页面的中心，并且进度本身没有更新，我不知道为什么，请帮忙？

已售硬币的进度条
筹集金额的进度条
% 资助（应在图片顶部）

CSS：

}
.progress {
    position: absolute;
    top: 80%;
    z-index: 2;
    text-align: center;
    width: 50%;

}

HTML：

 <div class="container">
    <div class="banner-buynow">
        <div class="col-md-2 col-md-offset-3 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>

        <div class="progress">
            <div class="progress-bar active progress-bar-striped active">
                <div class="percentage-label"></div>
            </div>
        </div>
    </div>

    <div class="progress">
        <div class=
        "progress-bar progress-bar-success progress-bar-striped active"
        style="width:1%">
            <div class="goal-label"></div>
        </div>
    </div>
</div>

<div class="funded-label"></div>

 $.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
    var soldT = Math.round(json.sold);
    var left = json.remaining;
    var total = Math.round(soldT+left);
    var ratebtc = json.rateT;
    var percent = Math.round(soldT/total*100);
    var backers = json.orders;
    var raisedtotal = Math.round(json.raised) + ' BTC';
    var goal = Math.round(raisedtotal/730);
    var percentsold = Math.round(percent) + '%';
    var backers = json.orders + ' backers';
    var funded = Math.round(json.raised/730*100);
    $('.progress-bar').css('width', percentsold);
    $('.percentage-label').html(soldT + "  coins sold ");
    $('.ratebtc').html(ratebtc );  
    $('.backers').html(raisedtotal + " from " + backers );
    $('.progress-bar-success').css('width', goal);
    $('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
    $('.funded-label').html(funded + " % funded");
});

JSFiddle：https://jsfiddle.net/qy1ko5xf/

【问题讨论】：

回到第一个主体，您从服务器返回的 percentsold 和 raisetotal 值是什么？这些都正确吗？
我认为您正在尝试通过除以字符串来计算goal。 raisedtotal 不是一个数字，因为您将 ' BTC' 附加到它。
服务器值正确，数字正确但进度条没有更新 - 不知道为什么
你应该看看这个：getbootstrap.com/components/?#progress
@LisaCheng 你可以试试这个jsfiddle.net/f6akqq8c/2。我更新了这个。让我知道这是否适合您。

标签： javascript css json twitter-bootstrap progress-bar

【解决方案1】：

如果你希望它位于容器的底部，你可以在容器内添加类 funded-label 的 div。给它一个absolute 的位置。

这是更新后的 HTML

<div class="container">
    <div class="banner-buynow">
        <div class="col-md-2 col-md-offset-3 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>
            <br/>
        <div class="progress">
            <div class="progress-bar active progress-bar-striped active">
                <div class="percentage-label"></div>
            </div>
        </div>
    </div>

    <div class="progress">
        <div class=
        "progress-bar progress-bar-success progress-bar-striped active"
        style="width:1%">
            <div class="goal-label"></div>
        </div>
    </div>
<div class="funded-label"></div>        
</div>

funded-label div 的 CSS 应该如下所示

.funded-label{
    color: white; 
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    background-color: #003a74;
    width: 100%;
    text-align: left;
    padding: 5px;
}

最后是更新的JS

$(function(){
     $.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
         console.log(json);
        var soldT = Math.round(json.sold);
        var left = json.remaining;
        var total = Math.round(soldT+left);
        var ratebtc = json.rateT;
        var percent = Math.round(soldT/total*100);
        var backers = json.orders;
        var raised = Math.round(json.raised);
        var raisedtotal = raised + ' BTC';
        var goal = Math.round((raised/730) * 100);
         console.log(goal);
        var percentsold = Math.round(percent) + '%';
        var backers = json.orders + ' backers';
        var funded = Math.round(raised/730*100);
        $('.progress-bar').css('width', percentsold);
         console.log(soldT);
         console.log(total);
        $('.percentage-label').html(soldT + "  coins sold ");
        $('.ratebtc').html(ratebtc );  
        $('.backers').html(raisedtotal + " from " + backers );
        $('.progress-bar-success').css('width', goal + '%');
        $('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
        $('.funded-label').html(funded + " % funded");
    }); 

});

这是一个有效的 JSFIDDLE。希望这会有所帮助。

【讨论】：