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

getJSON更新进度条

1 个答案: