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 获得选中文本内容的方法
Feb 15 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
浅谈document.write()输出样式
May 07 Javascript
Bootstrap table使用方法总结
May 10 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
VueJS全面解析
2016/11/10 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Django多数据库联用实现方法解析
2020/11/12 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
自荐信如何制作?
2014/02/21 职场文书
交通事故和解协议书
2014/09/25 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书