实现以下效果：



运用的知识点主要是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)

之前一直用的插件做表格分页，但是不同的场景用到的情况都不同，所以索性用个原生js搞一个封装好的。

后台动态获取数据进行渲染，等页面渲染成功之后在进行分页。数据的获取我用的vue，也可以用ajax等其他的，反正跟分页没多大关系，有一点就是分页函数必须在页面渲染之后执行。这里用到window.onload函数。

先看下效果，当不能点击时按钮显示为灰色。



样式自己写，我用的bootstrap的响应式表格。

html部分
<table class="table table-striped- table-bordered table-success table-hover "  >
		<thead class="text-center" style="background-color: #20C997;color: white;">
				<tr>
					<th ><b>字段主题</b></th>
					<th ><b>字段描述</b></th>
					<th ><b>字段名称</b></th>
					<th ><b>字段类型</b></th>
				</tr>
		</thead>
		<tbody id="idData">
				<tr v-for="(item,index) in data" :key='index'>
					<td >{{item.elclass}}</td>
					<td >{{item.eldesc}}</td>
					<td >{{item.elname}}</td>
					<td >{{item.eltype}}</td>
				</tr>
		</tbody>
</table>
<!--分页按钮区域-->
<div  align="center" >
	<div id="barcon" name="barcon" style="color: white;font-size: large;font-weight: bold;"></div>
</div>


注：id='idData'加在tbody上，不然会将头也算在数据num里，点击下一页的时候会跟着分页。

js部分

/**
 * 2019/8/20更新
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    //console.log(num);
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
       }else{   
           totalPage=parseInt(num/pageSize);   
       }   
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31 
       var endRow = currentPage * pageSize;//结束显示的行   40
       endRow = (endRow > num)? num : endRow;    //40
      // console.log(endRow);
       //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){    
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "table-row";    
			//irow.cells.style.width = "11%"; 
        }else{
            irow.style.display = "none";
			//irow.cells.style.width = "11%"; 
        }
    }
    //var pageEnd = document.getElementById("pageEnd");
    var tempStr = "共"+num+"条数据 分"+totalPage+"页 当前第"+currentPage+"页&nbsp;&nbsp;";
    if(currentPage>1){
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a>&nbsp;&nbsp;"
    }else{
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >首页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >上一页</a>&nbsp;&nbsp;";   
    }

    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>&nbsp;&nbsp;";
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>&nbsp;&nbsp;";
    }else{
        tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >下一页</a>&nbsp;&nbsp;";
       tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >尾页</a>&nbsp;&nbsp;";   
    }
	
	tempStr +="跳转至";
	tempStr +="<select class='' style='width:60px' οnchange='goPage(this.value,"+psize+")'>"; 
	tempStr +="<option></option>"
	for(var j=1;j<=totalPage;j++){
		tempStr +="<option  value='"+j+"' >第"+ j +"页</option>";
	}
	tempStr +="</select>";
    document.getElementById("barcon").innerHTML = tempStr;
    
}

调用
<script type="text/javascript" language="javascript">
			window.onload = function() {  //页面加载完之后执行
				goPage(1, 10);  //1为当前页数，10为每页显示行数
			};
		</script>

更新（2019-8-20）

增加跳转至第几页。更新了js部分，看效果



注：若添加查询功能一定要在查询结束后在执行一次函数，否则num无法更新，如vue中

updated() {goPage(1, 10);}

原生JS以及JQuery实现信息动态播放
元旦假期赶项目，真刺激！！！
上次国庆期间也“加班”，用BingMap画图(详情见JS画地图–BingMap)。这次比上次的麻烦一点，需要的功能也多了起来。废话不多说，直接开始，Let’s go!

1.项目需求

项目需求是每个项目开始前必须要熟知的一点，这次项目就有以下几点要求：

利用javascript在H5页面渲染地图，地图为英文版
地图上添加四个标记点，分别坐落于4个不同的位置
每个标记点对应一个提示框，提示框里会有数据展示
数据是按照时间变化的，所以再需要一个时间轴实现数据轮播

需求提完了，就要开始着手准备实现了。

2.项目规划（项目设计）

需求已经提出来了，如何实现，用什么技术，什么工具实现，效果图应该是什么样的，都应该规划好。

关于英文地图渲染，JS画地图–BingMap这里介绍了，使用BingMap WEB API就好了
4个坐标对应不同标记点，每个标记点对应一个提示框，提示框有关闭按钮，可以实现关闭功能。关闭后，点击标记点，可以再次展示提示框。这些通通可以使用BingMap WEB API以及JS技术来实现
时间轴动态播放，定时器定时，一段时间播放一个时间点数据，同时根据时间点数据变化，再变换提示框里数据，这里使用原生JS以及JQuery实现。

最难的是时间轴动态播放，因为源数据的时间字段并不是连续的，这一下子将难度提高了一倍。

3.代码编写

这里省去了处理数据的步骤，一般的话我比较习惯，等先把静态资源渲染完，再去处理数据。


前面两点，地图渲染和标记以及提示框，就不细说了。这里主要记录一个记忆点。
  //Attention!!! Microsoft.Maps.Location(lat, lon)，latitude first,then the longitude
  var point1 = new Microsoft.Maps.Location(30.581084, 114.3162); //武汉市
  ...

上篇地图渲染也记录过了，BingMap与Supermap不同，它先纬度后经度。画地图，做标记，各城市坐标肯定是需要的。这里附上百度提供的各省市坐标文件。
链接：https://pan.baidu.com/s/1uwUG7Rm619Lt-xyRN_GY1w 

提取码：r6wd
再附上一个工具网址，http://epsg.io/ ，该网站可以进行不同地图坐标系的坐标进行转换。


使用api渲染地图成功后会发现，地图上会有一些logo，这时候就需要自己手动消除了。使用浏览器自带的控制台，找到不必要的元素，设置其样式为不可见即可。这里再记录一个点：
h5:
    <div class="btn-control btn-play" onclick="btnControl()"></div>

css:
/*纯css完成'√','×',暂停以及播放按钮*/
.btn-control {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    cursor: pointer;
    background-color: #fff;
    position: absolute;
    right: 30px;
    top: 192px;
    border: 1.5px solid #444444;
    border-radius: 50%;
}    /*按钮样式*/

.btn-play:before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 19px;
    border-color: transparent transparent transparent black;
    margin: 3px 0 0 10px; 
}      /*点击之前显示暂停*/

.btn-pause:after {
    content: "";
    border-style: double;
    border-width: 0px 0px 0px 20px;
    position: relative;
    top: 6px;
    left: 7px;   /*点击之后更换类名修改样式为播放*/
}

.btn-play:before {
    display: block;
    content: "";
    width: 10px;
    height: 20px;
    border-style: solid;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    margin: 2px 0 0 10px;
}      /*点击之前显示'√'*/

.btn-pause:after {
    content: 'x';
    display: block;
    width: 20px;
    height: 5px;
    color: #444;
    font-size: xx-large;
    margin: -7px 9px; /*点击之后更换类名修改样式为'×'*/
}



重头戏就是时间轴，这里就仔细陈述。
首先提高用户体验度，设计了一个按钮，点击它，时间轴模块显示，再点击，时间轴模块隐藏。
上代码：
h5:
    <!--时间轴-->
	<div class="heatMapTimer">
        ...
	</div>
	<!--播放功能-->
	<div class="btn-control btn-play" onclick="btnControl()"></div>

js:
var count = 0;
function btnControl() {
  ++count;
  if (count % 2 === 1) {
    $(".btn-control").removeClass("btn-play").addClass("btn-pause"); //点击次数为单时，播放
    document.getElementsByClassName("heatMapTimer")[0].style.visibility =
      "visible";
  } else {
    $(".btn-control").removeClass("btn-pause").addClass("btn-play"); //点击次数为双时，暂停
    document.getElementsByClassName("heatMapTimer")[0].style.visibility =
      "hidden";
  }
}

逻辑很简单，点击次数单数时，时间轴显示。双数时，时间轴隐藏。见图：




其次开始播放功能，播放里面又有几种情况：

正常按顺序播放
规定显示6个点，当运行到第6个点时返回到第一个点重新播放
点击按钮可以暂停，再次点击可以继续
播放时点击时间点可以直接跳到这个点并继续播放
正常播放完时停止
播放完停止后，没有数据的点隐藏起来。（比如说，数据播放完时在第二个点，则第3，4，5，6个点隐藏起来）
播放停止后，再次点击，重新再渲染数据，实现再次播放

具体代码太多了，不便于贴出来，这里附上项目地址BingMap地图渲染,注释很详细。
截取一部份做展示用：
  //点击播放时间轴事件
  $timeUl.on("click", ".time-play", function () {
    if (play_cnt === 0) {
      $(this).removeClass("time-play").addClass("time-pause");
      index = Number($timeUl.find("li.active").attr("data-index")); //将字符串强制转换为数字类型
      timer = setInterval(function () {
        //判断当前索引的位置，如果在最后一位则从第一个时间点开始，反之则按顺序播放
        if (lenCount == index + 1) {
          $timeUl.find("li:eq('" + lenCount + "')").removeClass("active");
          $timeUl.find("li:eq(1)").addClass("active");
        } else {
          $(".time-line li.active")
            .next()
            .addClass("active")
            .siblings() //选择除本身以外的其他同级元素,,
            .removeClass("active");
        }
        $timeLi.each(function () {
          if ($(this).hasClass("active")) {
            index = Number($(this).attr("data-index")); //字符串转换为数字类型，索引从0开始
            normal.push(index); //获取当前active的点的索引并存入normal
            //用来判断是否正常轮播
            if (normal.length >= 2) {
              let ds1 = normal[normal.length - 1];
              let ds2 = normal[normal.length - 2]; //这里注意，js不能使用arr[-1]取最后一个值
              /*正常播放：如果倒数第一个数比倒数第二个数多1，
                或者倒数第一个为0（也即是第一个），倒数第二个数为5（也即是最后一个）
                都视为正常播放
               */
              if (ds1 == ds2 + 1 || (ds2 == 5 && ds1 == 0)) {
                cnt += 1;
              }
              /*非正常播放：正常播放时，用户点击了某一个点*/
              if (
                (ds1 > ds2 && ds1 - ds2 != 1) ||
                (ds1 < ds2 && ds2 - ds1 != 5)
              ) {
                cnt = cnt + ds1 - ds2;
              }
              //如果点击正在播放的点
              if (ds1 == ds2) {
                cnt = cnt;
              }
            } else {
              cnt += 1; //当播放点不足两个的时候
            }
          }
        });
        //添加圆点底下显示的数据
        axios.get("../data/data_pro_ed.json").then((res) => {
        ...//数据渲染
        });
      }, 1000);
    } else if (play_cnt === 1) {
      //播放完后play_cnt = 1
      window.location.reload(); //重新加载页面
    }
  });

  //点击暂停按钮事件
  $(".time-line").on("click", ".time-pause", function () {
    $(this).removeClass("time-pause").addClass("time-play");
    clearInterval(timer); //清除定时器
  });

  //点击某个时间点时触发事件
  $timeLi.not(":first-child").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
  });
}

因为是动态的，最终效果就不展示了。

4.总结

写逻辑的时候，一定要心无旁骛，否则就会越写越乱，越写越烦，结果就是钻牛角尖。
写完这个动态播放，感觉自己又行了，加油！！！

题目：请用原生js将如下数据结构转化为对应table，渲染在div.container中

数据结构为：
let tableData = {
  thead: ['头部1'，'头部2']，
  tbody: [
    [10,10],
    [9,5],
    [8,10],
    [7,10]
  ]
}

希望渲染成下图的结构，并且点击头部，将对应列的数据进行排序显示（升序，降序依次交替）


代码实现如下：
<script>
    let tableData = {
      thead: ['头部1', '头部2'],
      tbody: [
        [10, 10],
        [9, 5],
        [8, 10],
        [7, 10]
      ]
    }
    let flag = true;//点击头部的升序降序排列标志
    let container = document.getElementById('container');
    let table = document.createElement('table');
    container.appendChild(table);
    table.setAttribute('border', '1px');
    table.setAttribute('cellspacing', '0px');
    let thead = document.createElement('thead');
    table.appendChild(thead);
    let tbody = document.createElement('tbody');
    table.appendChild(tbody);
    //渲染头部和tbody，之所以将两个分开渲染是因为下面点击头部要加上点击事件，
    //这样的话，每次就只用渲染tbody部分，不用每次渲染都要给头部加上点击事件
    theadByData(tableData.thead);
    tbodyByData(tableData.tbody);
    //对头部添加点击事件
    let th = document.getElementsByTagName('th')
    for (let j = 0; j < th.length; j++) {
      th[j].onclick = function () {
        console.log(j)
        //根据点击的j，对tableData中的数据进行处理
        let data = sortData(tableData, j)
        //console.log(data)
        tbodyByData(data.tbody)
      }
    }
    function theadByData(data) {
      let str = ''
      str += '<tr>'
      for (let item of data) {
        str += `<th>${item}</th>`
      }
      str += '</tr>'
      thead.innerHTML = str;
    }
    function tbodyByData(data) {
      let str = ''
      for (let item of data) {
        str += '<tr>'
        for (let val of item) {
          str += `<td>${val}</td>`
        }
        str += '</tr>'
      }
      tbody.innerHTML = str;
    }

    function sortData(Data, index) {
      let newData = []
      //将要更新的数取出来，进行sort排序，排完序在将数据赋值回去
      for (let val of Data.tbody) {
        newData.push(val[index])
      }
      if (flag) {
        newData = newData.sort((a, b) => a - b)
      } else {
        newData = newData.sort((a, b) => b - a)
      }
      for (let key in Data.tbody) {
        Data.tbody[key][index] = newData[key]
      }
      flag = !flag;
      return Data
    }
  </script>

效果：

初始渲染：



点击头部1



再次点击头部1



点击头部2