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

最新推荐文章于 2022-11-15 09:53:17 发布

weixin_34363171

最新推荐文章于 2022-11-15 09:53:17 发布

阅读量152

点赞数

文章标签： javascript 后端 ViewUI

原文链接：https://segmentfault.com/a/1190000014159689

版权

需求分析

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

样式实现

两个主要部分:

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

<div class='progress_bar'><span></span></div>

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

<div class='progress_bar_label'><span></span></div>

/* 进度条样式设置 开始 */
.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内容如下:

<div class="progress_bar" data-color="#f60" data-per="90" data-width="300">
    <span></span>
</div>
<label class="progress_bar_label">100%</label>

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

整合代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <script src="../test/common/js/jquery-2.1.1.min.js"></script>
    <style>
        /* 进度条样式设置 开始 */
        .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;
        }
        /* 进度条样式设置 结束 */
    </style>
    <script>
        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();
        })
    </script>
</head>
<body>
    <div class="progress_bar" data-color="#f60" data-per="90" data-width="300">
        <span></span>
    </div>
    <label class="progress_bar_label">100%</label>

</body>
</html>

weixin_34363171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫