效果图

结合效果图说明需求：除了最新的信息图标为橘黄色外， 其余的都是灰色图片，然后根据返回的完整时间进行截取出日期和时分，后面就是详情信息

只粘贴了子页面内容，是我写的，其余的是别人写的，我不能拿出来的。

<!--子页面内容-->
            <!--头部-->
            <div style="margin-top: 20px;margin-left: 20px;">
                <label style="font-size: 15px;color: gray;">您的货物正在运输途中</label>
            </div>
            <!--list 内容-->
            <div class="mui-content">
                <ul class="mui-table-view" id="listcontent">
                
                </ul>
            </div>
        
        <!--JS代码区域-->
        <script type="text/javascript" src="js/mui.min.js" ></script>
        <script>
        //屏幕控制：设置为竖屏
        mui.plusReady(function() {
            plus.screen.lockOrientation("portrait-primary");
        });
        //创建蒙版
        var isshow = false;
        var mask=mui.createMask(function(){
            return isshow;
        });
        mask.show();
//
//      //post请求
//      mui.post('http://192.168.0.132:8080/etran/mobile/order/getOrderCarsLocation',{
//      //订单id
//      orderId:,
//      //订单车型
//      orderModel:
//  },function(data){
//      isshow=true;
//      mask.close();
//      console.log(JSON.stringify(data));
//      
//      if(data.returnCode ==-1){
//          mui.toast(data.msg);
//      }else{
//          if(data.returnCode==1){
//          
//          console.log("data="+data);
//          
//          document.getElementById('listcontent').appendChild(createFragment(data.result.length,data.result));
//          }
//      }
//      
//  },'json'
//);
//      //实例数据
        var result = [{"address":"重庆市","conment":"2016-07-01 09:30","date":""},
        {"address":"成都市","conment":"2016-07-01 12:15"},
        {"address":"广州市","conment":"2016-07-01 14:25"},
        {"address":"上海市","conment":"2016-07-02 08:15"},
        {"address":"天津市","conment":"2016-07-02 09:15"},
        {"address":"哈哈市","conment":"2016-07-02 12:15"},
        {"address":"未知","conment":"2016-07-03 08:15"},
        {"address":"未知","conment":"2016-07-03 09:15"}];
        
        document.getElementById('listcontent').appendChild(createFragment(result.length,result));
        /* 
         * 在listcontent下添加子标签
         * 
         */
         function createFragment(count,result){
            isshow=true;
            mask.close();
            console.log('count ='+count+'result ='+parseInt(result[0].conment.substring(10,13)));
            //创建文档的碎片节点
            var fragment = document.createDocumentFragment();
            for (var i=0;i<count;i++) {
                //内容中添加div
                content = document.createElement("div");
                //i大于0并且时间小于24小时
                if (i > 0  && parseInt(result[i].conment.substring(10,13))<24) {
                    
                    console.log('date -- '+parseInt(result[i].conment.substring(10,13)));
                    
                    //通过时间进行判断是否显示日期
                    if (parseInt(result[i].conment.substring(10,13)) < parseInt(result[i-1].conment.substring(10,13))) {
                            content.innerHTML='<li style="padding: 5px;">'+
                    '<img  class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
                    '<label  style="margin-left: 10px; ">'+result[i].conment.substring(0,10)+'</label>'+
                    '<label  style="margin-left: 20px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
                    '<label  style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
                    '</li>';
                    
                    //最后一条显示orange
                    } else if(i==count-1){ 
                        content.innerHTML='<li style="padding: 5px;">'+
                        '<img  class="content_image" src="images/circle_orange.png" style="width: 10px;height: 10px;"/>'+
                        '<label  style="margin-left: 93px; "></label>'+
                        '<label  style="margin-left: 10px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
                        '<label  style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
                        '</li>';
                    }
                    else{
                        content.innerHTML='<li style="padding: 5px;">'+
                        '<img  class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
                        '<label  style="margin-left: 93px; "></label>'+
                        '<label  style="margin-left: 10px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
                        '<label  style="margin-left: 10px; color: darkgray;">车辆到达【'+result[i].address+'】</label>'+
                        '</li>';
                        
                    }
                }else{
                    //当i=0的时候
                    if(i==0){
                            content.innerHTML='<li style="padding: 5px;">'+
                            '<img  class="content_image" src="images/circle_gray.png" style="width: 10px;height: 10px;"/>'+
                            '<label  style="margin-left: 10px; ">'+result[i].conment.substring(0,10)+'</label>'+
                            '<label  style="margin-left: 20px; color: darkgray;">'+result[i].conment.substring(10,16)+'</label>'+
                            '<label style="margin-left: 10px; color: darkgray;">车辆从【'+result[i].address+'】发出</label>'+
                            '</li>';
                        }
                }
                fragment.appendChild(content);
            }
            return fragment;
        }
        </script>
        
    </body>