【工作日记】页管 - 用户信息占比 - 长方形百分比 - 进度条

HitenDev 发布于2019-08-30 14:20 / 3291人阅读

摘要：需求分析页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示样式实现两个主要部分进度条，内外两个盒子组成，外层做进度条边框，内层做填充效果百分比显示，一个标签就够了进度条样式设置开始进度条样式设置结束功

需求分析

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

样式实现

两个主要部分:

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

整合代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115953.html

【工作日记】页管 - 用户信息占比 - 长方形百分比 - 进度条

摘要：需求分析页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示样式实现两个主要部分进度条，内外两个盒子组成，外层做进度条边框，内层做填充效果百分比显示，一个标签就够了进度条样式设置开始进度条样式设置结束功需求分析页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示showImg(https://segmentfault.com/img/bV7z...

hsluoyz 2019-08-22 15:59 评论0 收藏0
【工作日记】页管 - 用户信息占比 - 长方形百分比 - 进度条

摘要：需求分析页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示样式实现两个主要部分进度条，内外两个盒子组成，外层做进度条边框，内层做填充效果百分比显示，一个标签就够了进度条样式设置开始进度条样式设置结束功需求分析页管会员信息展示页面需要多个百分比显示的长方形进度条，最终效果如下图所示showImg(https://segmentfault.com/img/bV7z...

Winer 2019-08-02 10:06 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

leanote 2019-08-21 11:36 评论0 收藏0
css3实现圆形进度条

摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...

enali 2019-08-29 12:12 评论0 收藏0