需要实现效果如下图。
页面代码
<div class='progress_bar' data-color='#f66' data-per='"+list[i].percent+"' data-width='180'><span></span></div><label class='progress_bar_label'>100%</label>
第一次进入页面调用。或每次赋值或更改值时调用方法
function updataProgressBar(){ //更新进度条信息
//进度条设置
var $color=$('.progress_bar').attr('data-color'); //data-color 为进度条颜色 例#ff6600
$('.progress_bar').each(function () {
var per=$(this).attr('data-per'); //data-per 为进度条 进度值 1-100
var barWidth=$(this).attr('data-width'); //data-width 为进度条宽度 值自定义 单位自动填充px
$(this)
.find('span').css({'background' : $color , 'width' : per + '%'})
.parent().css({'width' : barWidth})
.next().text(per+'%');
})
}
一个95后程序员的自述:
现在的我还年轻,还有激情,要在有限的时间和激情里实现自我价值.