纯前端实现物流信息跟踪

html代码只是为了前期调试样式&＃xff0c;后期具体html代码根据数据动态生成

css部分代码

.toptop{margin:.5rem 0;}
//去掉按钮的轮廓边框
.fuzhi{border: none;outline: none;}
.wuliucenter{margin:2rem;}
.wuliuxnxi{display: flex;}
//设置物流步骤条圆点的边距
.wuliure,
.wuliureccc,
.wuliureccca
{margin-right:8px; position: relative;}.wuliuxnxi{display: flex;}.wuliureaa {position: relative;}
//左侧物流时间信息设置flex布局&＃xff0c;使时间换行显示
.time{width: 60%;text-align: left;font-size: 80%;flex: 0 0 5rem;padding: 0 0 .5rem 0;
}
//右侧物流详细信息布局样式,使用定位是为了实现最后一个圆点
.wuliureaa{
display: flex;
padding: 0 0 .5rem 0;
position: relative
}
//设置右侧物流信息里面的数字不换行显示
.wuliureaa span{font-size: 80%;word-break: break-all;word-wrap:break-word;}
//第一个圆点
.wuliure::before{content: &＃39;√&＃39;;display: inline-block;color:#fff;width: 1rem;background-color: blue;height: 1rem;line-height: 1rem;text-align: center;border-radius:50%;position: relative;z-index:99;
}
//中间的圆点
.wuliureccc::before{content: &＃39;&＃39;;display: inline-block;width: 0;height: 0;border: .5rem solid #ccc;border-radius:50%;position: relative;z-index:99;top: .1rem;
}
/*中间的圆点*/
.wuliureccc::before{content: &＃39;&＃39;;display: inline-block;width: 0;height: 0;border: .5rem solid #ccc;border-radius:50%;position: relative;z-index:99;top: .1rem;
}
/*最后一个圆点 */
.wuliureccca::before{content: &＃39;&＃39;;display: inline-block;width: 0;height: 0;border: .5rem solid #ccc;border-radius:50%;position: relative;z-index:99;top: .1rem;
}
/*圆点竖线 */
.wuliureccc::after{content: &＃39;&＃39;;display: inline-block;width: 0;height:5rem;//苹果6必须设置高度&＃xff0c;不然显示不出来border-left: .1rem solid #ccc;position: absolute;left: .5rem;top: -3rem;z-index:80;
}
.wutop{padding-top: 0;}
/* 最后一条竖线 */
.wuliureccca::after{content: &＃39;&＃39;;display: inline-block;width: 0;height:5rem;border-left: .1rem solid #ccc;position: absolute;left: .5rem;top: -4rem;z-index:80;
}

js代码

首先需要引用jq

<script type&＃61;"text/Javascript">
window.onload &＃61; function(){init();
}
function init(){
//获取路由参数var data&＃61;window.location.search.slice(1).replace(&＃39;&&＃39;,&＃39;&＃61;&＃39;).split("&＃61;")var wuliuNO&＃61;data[1]var name&＃61;tata[3]//lsit为物流信息数据var list&＃61;[{"time":"2020-09-05 16:52:45","status":"邮件投递到海鑫超市9998号速递易N67包裹柜,投递员:曹杰,电话:19931358611"},{"time":"2020-09-05 15:25:34","status":"【万全处理中心】安排投递,投递员:曹杰,电话:19931358611,揽投部电话:0313-4220970"},{"time":"2020-09-05 06:19:30","status":"离开【张家口网路运营中心处理中心】,下一站【万全处理中心】"},{"time":"2020-09-04 13:57:47","status":"到达【张家口网路运营中心处理中心】"},{"time":"2020-09-04 06:51:52","status":"离开【河北省环渤海邮件处理中心】,下一站【张家口网路运营中心处理中心】&＃xff08;经转&＃xff09;"},{"time":"2020-09-04 04:46:00","status":"到达【河北省环渤海邮件处理中心】&＃xff08;经转&＃xff09;"},{"time":"2020-09-03 03:54:49","status":"离开【长沙邮区中心局邮件处理中心】,下一站【河北省环渤海邮件处理中心】"},{"time":"2020-09-02 18:08:23","status":"到达【长沙邮区中心局邮件处理中心】"},{"time":"2020-09-02 17:55:47","status":"离开【望城区快递包裹揽投部】,下一站【长沙邮区中心局邮件处理中心】"},{"time":"2020-09-02 17:51:14","status":"【望城区快递包裹揽投部】已收寄,揽投员:范红亮,电话:13574131249"}]$(&＃39;.wuliuno&＃39;).html(wuliuNO)//单号$(&＃39;.name&＃39;).html(name)//收货人$(&＃39;.tel&＃39;).html(13188888888)/号码$(&＃39;.tishi&＃39;).html(&＃39;(点击拨号)&＃39;)$(&＃39;.tel&＃39;).prop(&＃39;href&＃39;,&＃39;tel:13188888888&＃39;)//后期根号码是否存在设置改元素显示的内容//循环遍历&＃xff0c;创建物流信息for(var i&＃61;0;i<list.length;i&＃43;&＃43;){if(i&＃61;&＃61;0){var inhtml&＃61;&＃39;