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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
用PHP实现图象锐化代码
2007/06/14 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014年党建工作总结
2014/11/11 职场文书
小学运动会加油稿
2015/07/22 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
mysql全面解析json/数组
2022/07/07 MySQL