获取物流信息并动态展示（仿淘宝物流信息）

最终效果如图

前端代码如下

<div 
class="track-rcol">
            <divclass="track-list">
                <ul>
                    <liclass="first">
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="txt">感谢您在京东购物，欢迎您再次光临！</span>
                    </li>
                    <li>
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="txt">【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】</span>
                    </li>
                    <li>
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="txt">感谢您在京东购物，欢迎您再次光临！</span>
                    </li>
                    <li>
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="txt">感谢您在京东购物，欢迎您再次光临！</span>
                    </li>
                    <li>
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="txt">感谢您在京东购物，欢迎您再次光临！</span>
                    </li>
                    <li>
                        <iclass="node-icon"></i>
                        <spanclass="time">2016-03-10 18:07:15</span>
                        <spanclass="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 =
`<li class="first">
<i class="node-icon"></i>

<span class="time">` +obj.Traces[0].AcceptTime
+ `</span>

<span class="txt">` +obj.Traces[0].AcceptStation
+`</span>

</li>`;

$('.track-list ul').html(deliver1);//清空ul并添加最新一条物流信息

for(vari =
1;i<obj.Traces.length;i++){

var 
deliver =
`<li >
<i class="node-icon"></i>

<span class="time">` +obj.Traces[i].AcceptTime
+ `</span>

<span class="txt">` +obj.Traces[i].AcceptStation
+`</span>

</li>`;

$('.track-list ul').append(deliver);//添加之前的物流轨迹
}

此时从后台获取的json是字符串格式，需要用eval来解析

为什么要 eval这里要添加 “("("+express+")");//”呢？

原因在于：eval本身的问题。由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

解析出来后再用for方法动态生成并添加到页面上就ok了

获取物流信息并动态展示（仿淘宝物流信息）

相关推荐