android长条会员等级进度条,【工作日记】页管 - 用户信息占比 - 长方形百分比 - 进度条...

需求分析

页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示

样式实现

两个主要部分:

1.进度条，内外两个盒子组成，外层做进度条边框，内层做填充效果；

2.百分比显示，一个label标签就够了；

/* 进度条样式设置 开始 */

.progress_bar{

display: inline-block;

width: 200px;

height: 20px;

border-radius: 8px;

border: 1px solid #eee;

overflow: hidden;

box-shadow: 0 0 1px #ccc;

margin: 0px 10px;

}

.progress_bar span{

display: inline-block;

height: 100%;

width: 0;

line-height: 20px;

vertical-align: top;

transition: all .6s;

}

.progress_bar_label{

font-size: 14px;

font-weight: bold;

vertical-align: top;

margin: 0 5px;

}

/* 进度条样式设置 结束 */

功能实现

1.传递参数进来后，进度条的百分比、进度条的颜色、进度条的比例文字还有进度条的整体宽度可以相应的发生变化，后端要求在标签内修改,因此在div上写入自定义属性 data-color 来修改背景色， data-pre 来修改百分比文字, data-width 来修改进度条的整体宽度;增加相应自定义属性后的html内容如下:

100%

2.根据自定义属性的数值来修改相应的参数:

var $color=$('.progress_bar').attr('data-color'); //data-color 为进度条颜色 例#ff6600

var per=$(this).attr('data-per'); //data-per 为进度条 进度值 1-100

var barWidth=$(this).attr('data-width'); //data-width 为进度条宽度 值自定义 单位自动填充px

$('.progress_bar span').css({'background' : $color , 'width' : per + '%'}) //修改进度条颜色和进度条占比

.parent().css({'width' : barWidth}) //修改进度整体宽度

.next().text(per + '%'); //修改进度条文字

3.由于进度条先页管会有多个，因此需要循环修改数组中每个的属性值,添加循环后修改代码如下：

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 + '%'); //修改进度条文字

})

整合代码

Form

/* 进度条样式设置 开始 */

.progress_bar{

display: inline-block;

width: 200px;

height: 20px;

border-radius: 8px;

border: 1px solid #eee;

overflow: hidden;

box-shadow: 0 0 1px #ccc;

margin: 0px 10px;

}

.progress_bar span{

display: inline-block;

height: 100%;

width: 0;

line-height: 20px;

vertical-align: top;

transition: all .6s;

}

.progress_bar_label{

font-size: 14px;

font-weight: bold;

vertical-align: top;

margin: 0 5px;

}

/* 进度条样式设置 结束 */

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 + '%');//修改进度条文字

})

}

$(function () {

updataProgressBar();

})

100%