进度条函数封装

使用说明

1. 在项目中，有时难免会遇到一些同样的功能，进度条时其中一个。在这里封装的目的主要是不必重复的编写代码，避免时间的浪费。
2. 使用的时候，引入所需的images、css、js文件，在需要的地方拷贝html结构，调用函数（函数所需参数：进度条数据项对象process，进度标识mark，插入位置对象即可）

效果展示

实现过程

index.js
//根据进度状态变化样式效果
function initShow(process,mark,obj){//参数解释,process：进度数据；index：进度进程标识;obj：进度结构插入对象
    var html=''
    process.map(function(ele,index){
        html+='<li><div class="process-bar"><span class="line-top"></span>';
        //图标变更
        if(index+1<=mark){
            html+='<img src="./images/sucess.png" alt="图标"/>'
        }
        else{
            html+='<img src="./images/unsucess.png" alt="图标"/>'
        }
        // 去除最后一项下部线条
        if(index+1==process.length){
            html+='</div>'
        }
        else{
            html+='<span class="line-bottom"></span></div>'
        }
        html+='<div class="process-text"><p class="process-title"><span>'+ele.process+'</span>'
        if(ele.data){//判断时间是否存在
            html+='<span>09-09&nbsp;18:28</span>'
        }
        html+='</p><p class="process-info">'+ele.text+'</p></div></li>'
    })
    //插入结构
    obj.append(html);
    for(var i=0;i<obj.children().length;i++){
    //根据mark标识改变线条颜色
        if(i<mark){
            $('.line-top').eq(i).css('backgroundColor','#2174D2')
            $('.line-bottom').eq(i).css('backgroundColor','#2174D2')
        }
    }
}

使用示例

//程序入口
$(function(){
    initShow(process,4,$('.process-wrapper'))
})

来源：CSDN

作者：baitwoWN

链接：https://blog.csdn.net/weixin_45947191/article/details/103595826