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实现一些常用软件的下载导航
Aug 03 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js确定对象类型方法
2012/03/30 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
常用jQuery代码分享
2015/07/14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js面向对象编程总结
2017/02/16 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python制作数据导入导出工具
2015/07/31 Python
Python实现的桶排序算法示例
2017/11/29 Python
flask中的wtforms使用方法
2018/07/21 Python
浅谈python之新式类
2018/08/12 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
财务副总经理工作职责
2013/11/25 职场文书
监察建议书范文
2014/03/12 职场文书
开发房地产协议书
2014/09/14 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2016年教师节感言
2015/12/09 职场文书