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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
中英文字符串翻转函数
2008/12/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP常用技巧汇总
2016/03/04 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
js中的布尔运算符使用介绍
2013/11/20 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
中科软笔试题和面试题
2014/10/07 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
英语专业自荐书
2014/06/13 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang