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 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
Javascript节点关系实例分析
May 15 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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/03/24 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
PyTorch中的Variable变量详解
2020/01/07 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Django中的AutoField字段使用
2020/05/18 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
责任书格式范文
2014/07/28 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2014年教研工作总结
2014/12/06 职场文书
初中信息技术教学计划
2015/01/22 职场文书
离婚被告答辩状
2015/05/22 职场文书
《西门豹》教学反思
2016/02/23 职场文书