javascript - getJSON更新进度条

Question

尝试在 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>

JS

 $.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/

Answer 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 的 CSS div 应该是这样的

.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 。希望这会有所帮助。