overview...html-优快云博客

本文介绍了一个用于实时监控物流盒子状态的系统，通过Ajax技术定时从服务器获取盒子的状态信息，并更新到前端页面，实现了对总部、运输车队、配送站点及配送员等不同环节盒子状态的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html lang = "en">
<head>
<title> testbx </title>
<meta charset = "utf-8">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<style type="text/css">
body {
color: #000;
background: #fff;
margin: 10;
padding: 10;
font-family: verdana,sans-serif,verdana,arial;
}
body p
{
text-align:right;
font-size:16px;
font-family: verdana,sans-serif,verdana,arial;
}
table.gridtable {
font-family: sans-serif,verdana,arial;
font-size:11px;
color:#333333;
border-color: #666666;
border-collapse: collapse;
width:80%;
line-height:150%
}
table.gridtable th {
border-width: 2px;
padding: 8px;
   text-align:left;
   font-size:20px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
table.gridtable td {
border-width: 2px;
padding: 8px;

   text-align:left;
border-style: solid;
border-color: #666666;
   height:30px;
   width:25%;
background-color: #F0F0F0;
}

#tbrankIcon
{
float:left;
}
</style>

var _zcpackage=0;
var _zcavailablebox=0;
var _zctotal=0;

var _tracknormal=0;
var _trackabnormal=0;
var _tracktotal=0;

var _dispackage=0;
var _disreturn=0;
var _distotal=0;

var _delpackage=0;
var _delreturn=0;
var _deltotal=0;

function showBoxStatus()
{
//alert("showBoxStatus...");
   xmlHttp=GetXmlHttpObject();
   if (xmlHttp==null)
   {
   alert ("Browser does not support HTTP Request");
   return;
   }
   var url="http://localhost/retrievestatus.php";
   url=url+"?onlinedate="+boxDate;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);

}

}

   var _valzcpackage = document.getElementById("zc-package");
   var _valzcavailablebox = document.getElementById("zc-available-box");
   var _valzctotal = document.getElementById("zc-total");

   if(_valzcpackage) _valzcpackage.innerHTML=_zcpackage;
   if(_valzcavailablebox) _valzcavailablebox.innerHTML=_zcavailablebox;
   if(_valzctotal) _valzctotal.innerHTML="<a href=clicktable.html?location=1>" +(_zcpackage+_zcavailablebox) + "</a>";

   //document.getElementById("c").innerHTML="<a href=\"xxx.jsp\"></a>";

   var _valtrnormal = document.getElementById("track-normal");
   var _valtrabnormal = document.getElementById("track-abnormal");
   var _valtrtotal = document.getElementById("track-total");

   if(_valtrnormal) _valtrnormal.innerHTML=_tracknormal;
   if(_valtrabnormal) _valtrabnormal.innerHTML = _trackabnormal;
   if(_valtrtotal) _valtrtotal.innerHTML ="<a href=clicktable.html?location=3>"+( _tracknormal + _trackabnormal) + "</a>";

   var _valdipackage = document.getElementById("distribution-package");
   var _valdireturn = document.getElementById("distribution-return");
   var _valditotal = document.getElementById("distribution-total");

   if(_valdipackage) _valdipackage.innerHTML =_dispackage;
   if(_valdireturn) _valdireturn.innerHTML = _disreturn;
   if(_valditotal) _valditotal.innerHTML = "<a href=clicktable.html?location=2>"+(_dispackage+_disreturn) + "</a>";

   var _valdepackage = document.getElementById("deliver-package");
   var _valdereturn = document.getElementById("deliver-return");
   var _valdetotal = document.getElementById("deliver-total");

   if(_valdepackage) _valdepackage.innerHTML= _delpackage;
   if(_valdereturn) _valdereturn.innerHTML= _delreturn;
   if(_valdetotal) _valdetotal.innerHTML= "<a href=clicktable.html?location=4>"+(_delpackage+_delreturn) + "</a>";

   var _valtotal = document.getElementById("totalbox");
   _valtotal.innerHTML="The total box number:" + (_zcpackage+_zcavailablebox + _tracknormal + _trackabnormal + _dispackage+_disreturn + _delpackage+_delreturn) + ", last update date:" + boxDate ;

}
}
function updateData()
{

   _zcpackage=0;
   _zcavailablebox=0;
   _zctotal=0;

   _tracknormal=0;
   _trackabnormal=0;
   _tracktotal=0;

   _dispackage=0;
   _disreturn=0;
   _distotal=0;

   _delpackage=0;
   _delreturn=0;
   _deltotal=0;

showBoxStatus();
//alert(_deltotal);

}
window.onload = function()
{
//var li = document.getElementById("zc-package");
   //alert(li.lastChild.className);
   //li.innerHTML = "320";
   updateData();

setInterval(updateData, 8000);
}
</script>

<body>