JS实现数据动态渲染的竖向步骤条


Posted in Javascript onJune 24, 2020

本文实例为大家分享了JS实现数据动态渲染竖向步骤条的具体代码,供大家参考,具体内容如下

实现以下效果:

JS实现数据动态渲染的竖向步骤条

运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。
直接上代码

html部分:

<ul class="progress_box">
  </ul>

css部分:

* {
    margin: 0;
    padding: 0;
  }
  
  ul {
    width: 360px;
    margin:100px auto;
  }
  
  li {
    position: relative;
    padding: 0 21px;
    list-style: none;
    height: 54px;
    border-left: 1px solid #4BACFD;
  }
  
  li:before {
    content: "";
    display: block;
    position: absolute;
    /* margin-left: -6px; */
    top: 0;
    left: -5px;
    width: 10px;
    height: 10px;
    /* line-height: 22px; */
    text-align: center;
    background: #4BACFD;
    /* color: #fff; */
    /* font-size: 14px; */
    border-radius: 50%;
  }
  .last_progress{
    border: none;
  }
  .last_progress::before{
    content: "●";
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    /* margin-left: -6px; */
    /* top: 0; */
    left: -6px;
    width: 14px;
    height: 14px;
    line-height: 11.5px;
    text-align: center;
    background: rgba(75, 172, 253, .3);
    color: #4BACFD;
    font-size: 18px;
    border-radius: 50%;
  }
  .progress_content{
    position: absolute;
    top: -4px;
  }
  .progress_title{
    font-size: 15px;
    color: #222;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .progress_time{
    color: #999999;
    font-size: 12px;
  }
  .active{
    color: #2BA0FF;
  }

JS部分:

var progressList = [
      {'progress_title':'无感支付签约成功','progress_time':'2020.06.10 09:00'},
      {'progress_title':'提额申请提交成功,银行审核中。','progress_time':'2020.06.10 10:00'},
      {'progress_title':'提额审核通过,提额额度xxxx元。','progress_time':'2020.06.10 10:05'},
      {'progress_title':'提额成功,当前可用额度为10000元','progress_time':'2020.06.10 10:05'}
    ]
    function renderProgress(progressList){
      var progressBox = document.querySelector('.progress_box');
      console.log(progressBox)
      console.log(progressList);
      var progressTemplate = ''
      for(var i = 0; i < progressList.length; i ++){
        if(i == progressList.length - 1){
        progressTemplate += "<li class='last_progress'><div class='progress_content'><p class='progress_title active'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
        }else{
        progressTemplate += "<li><div class='progress_content'><p class='progress_title'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
        }
      }
      progressBox.innerHTML = progressTemplate
    }
renderProgress(progressList)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
javascript事件问题
Sep 05 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jquery 插件学习(二)
Aug 06 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
vue.js实现照片放大功能
Jun 23 #Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
You might like
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JS求平均值的小例子
2013/11/29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
layui使用label标签的方法
2019/09/14 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python动态规划算法实例详解
2020/11/22 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
优秀安全员事迹材料
2014/05/11 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2015年测量员工作总结
2015/05/23 职场文书
复兴之路展览观后感
2015/06/02 职场文书
Python基础之元编程知识总结
2021/05/23 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript