获取物流信息并动态展示（仿淘宝物流信息）
最终效果如图
前端代码如下
<
div
class=
"track-rcol"
>
<
div
class=
"track-list"
>
<
ul
>
<
li
class=
"first"
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>感谢您在京东购物，欢迎您再次光临！
span
>
li
>
<
li
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】
span
>
li
>
<
li
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>感谢您在京东购物，欢迎您再次光临！
span
>
li
>
<
li
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>感谢您在京东购物，欢迎您再次光临！
span
>
li
>
<
li
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>感谢您在京东购物，欢迎您再次光临！
span
>
li
>
<
li
>
<
i
class=
"node-icon"
>
i
>
<
span
class=
"time"
>2016-03-10 18:07:15
span
>
<
span
class=
"txt"
>感谢您在京东购物，欢迎您再次光临！
span
>
li
>
ul
>
div
>
div
>
<
style
>
body{
font-size:
12px;}
ul li{
list-style:
none;}
.track-rcol{}
.track-list{
margin:
20px;
padding-left:
5px;
position:
relative;}
.track-list li{
position:
relative;
padding:
9px
0
0
25px;
line-height:
18px;
border-left:
1px
solid
#d9d9d9;
color:
#999;}
.track-list li.first{
color:
red;
padding-top:
0;
border-left-color:
#fff;}
.track-list li .node-icon{
position:
absolute;
left:
-6px;
top:
50%;
width:
11px;
height:
11px;
background:
url(
img/order-icons.png)
-21px
-72px
no-repeat;}
.track-list li.first .node-icon{
background-position:
0
-72px;}
.track-list li .time{
margin-right:
20px;
position:
relative;
top:
4px;
display:
inline-block;
vertical-align:
middle;}
.track-list li .txt{
max-width:
600px;
position:
relative;
top:
4px;
display:
inline-block;
vertical-align:
middle;}
.track-list li.first .time{
margin-right:
20px; }
.track-list li.first .txt{
max-width:
600px; }
<
/
style
>
用以上html和CSS来定义一个如下图所示的物流信息展示模块，大家也可以自己写一个，
重头还是在JS
js代码如下
var
express =
'#(express)';
//后台获取物流json
var
obj =
eval(
"(" +
express +
")");
var
deliver1 =
`
` +
obj.
Traces[
0].
AcceptTime +
`
` +
obj.
Traces[
0].
AcceptStation +
`
`;
$
(
'.track-list ul'
).
html
(
deliver1
);
//清空ul并添加最新一条物流信息
for(
var
i =
1;
i<
obj.
Traces.
length;
i++){
var
deliver =
`
` +
obj.
Traces[
i].
AcceptTime +
`
` +
obj.
Traces[
i].
AcceptStation +
`
`;
$(
'.track-list ul').
append(
deliver);
//添加之前的物流轨迹
}
此时从后台获取的json是字符串格式，需要用eval来解析
为什么要 eval这里要添加 “("("+express+")");//”呢？
原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
解析出来后再用for方法动态生成并添加到页面上就ok了