[英]getJSON to update progress bar
Trying to get this progress bar on Bootstrap to show real-time progress from a JSON API, while also showing the % of goal achieved: 尝试在Bootstrap上获取此进度条,以显示JSON API的实时进度,同时还显示已实现目标的百分比:
Here is how it looks right now: http://puu.sh/jt2Gu/823f6a6a0f.png 这是现在的样子: http : //puu.sh/jt2Gu/823f6a6a0f.png
Both progress bars should be centered on the page and the progress itself isnt updating and I'm not sure why, please help? 两个进度条都应该在页面上居中,并且进度本身不会更新,我不确定为什么,请帮忙吗?
CSS: CSS:
}
.progress {
position: absolute;
top: 80%;
z-index: 2;
text-align: center;
width: 50%;
}
HTML: 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 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/ JSFiddle: https ://jsfiddle.net/qy1ko5xf/
you can add the div with the class funded-label
inside the container if you want it to be at the bottom of the container. 您可以在容器内添加带有funded-label
的div(如果希望它位于容器的底部)。 give it an absolute
position. 给它一个absolute
位置。
here's the updated HTML 这是更新的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>
the CSS for the funded-label
div should look like this 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;
}
and finally here' the updated JS 最后是更新的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");
});
});
here's a working JSFIDDLE . 这是一个正在工作的JSFIDDLE 。 hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.