jquery-EasyUI---progressbar进度条的的使用

1、经常用到的进度条，标签实现

 <div class="easyui-progressbar" data-options="value:88" style="width:400px;"></div>  

2.html+js实现

<div id="pro-g" style="width:200px;"></div> 

1 $('#pro-g').progressbar({ 
2     value: 0 
3 }); 

3.一般情况下我们看到的进度条都是动态改变状态的，在这里我们通过定时器来模拟这个操作

js代码部分：

function pro () {
    var value = $('#pro-g').progressbar('getValue'); 
    if(value>=100){
        return ;
    }
    else{
        setTimeout(function() {
            value +=10;
            $('#pro-g').progressbar('setValue', value);
            pro();
        }, 1000);
    }
}
$('#pro-g').progressbar({ 
    value: 0 ,//初始化状态为0
});

并且每次进度值改变的都可以触发onChange这个时间，我们在之前的基础上去捕捉每次值改变的情况

js部分：

1 $('#pro-g').progressbar({
2     onChange: function(value){
3         console.log(value)
4     }
5 });

 

转载于:https://www.cnblogs.com/knightshibiao/p/3826596.html