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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
js验证框架实现代码分享
May 18 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue实现div单选多选功能
2020/07/16 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python读大数据txt
2016/03/28 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
详解python如何引用包package
2020/06/07 Python
python绘制汉诺塔
2021/03/01 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
工作所在部门证明
2014/09/21 职场文书
违章停车检讨书
2014/10/21 职场文书
个人学习总结范文
2015/02/15 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL