您好,我正在尝试显示动态数据的进度条
要求:从动态 json 获取数据并且需要使用从 0 到 100 的设置间隔每 x 秒调用一次 api 如果达到 100 那么我们需要停止进度并显示相同的下一页的进度或者如果用户按下我们需要停止进程。
注意:需要每 x 秒调用一次动态 json
我做了什么:
我每 x 秒创建一个进度,下面是代码
<div>
<div class="container">
<hr>
<div class="progress" id="blips">
<div class="progress-bar" role="progressbar">
<span class="sr-only"></span>
</div>
</div>
<hr>
<hr>
<button class="btn btn-primary">Stop</button>
</div>
</div>
js
var data = {
timer: {
"num": "95.6",
"perfection": "20",
}
}
$(document).ready(function(){
loadData();
});
function loadData(){
var timerId = 0;
var ctr=0;
var max= data['timer']['perfection'];
timerId = setInterval(function () {
// interval function
ctr++;
$('#blips > .progress-bar').attr("style","width:" + ctr*max + "%");
// max reached?
if (ctr==max){
clearInterval(timerId);
}
}, 500);
}
$('.btn-primary').click(function () {
clearInterval(timerId);
});
最佳答案
做了一些改变:
变量
data
应该在里面声明函数 loadData() {...}
或作为参数传入
设置进度条宽度的jquery语句应该是
$('#blips > .progress-bar').css("width", ctr + "%");
有了这个改变,它就可以工作了。看 fiddle
关于javascript - 如何使用 javascript/jquery 使用动态 json 数据无缝显示进度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57352010/