温度状态监测系统-优快云博客

本文介绍了一个实时温度状态监测系统的设计与实现，系统采用HTML、CSS和JavaScript构建，能够定时更新和显示盒子设备的温度数据、状态及刷新时间，通过AJAX技术与服务器交互获取最新数据。

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

<!doctype html>
<html lang = "en">
<head>
<title> Temperatures </title>
<meta charset = "utf-8">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<style type="text/css">
body {
color: #0f0;
background: #fff;
margin: 10;
padding: 10;
font-family: Georgia;
}

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
//width:30%;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
text-align:left;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
text-align:left;
    border-style: solid;
    border-color: #666666;
    //background-color: #ffffff;
}

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

function 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);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{

//var rec = JSON.parse(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")")

var rows = dataObj['data'];
//var x = 0;
for(var x=0; x<rows.length; x++)
{
    //alert(rows[x]);
  var record = String(rows[x]);
  var boxstatus = record.split(",");
  addRows(boxstatus[0],boxstatus[1],boxstatus[2],boxstatus[3]);
  boxDate = boxstatus[3];

}

var boxTable = document.getElementById("boxlog");
makeSortable(boxTable);
document.getElementById("txtHint").innerHTML="Last update date: " + boxDate;

}
}
function addRows(boxId,parentId,status,onlinedate)
{
var boxTable = document.getElementById("tbMain");

        var newTr = boxTable.insertRow();

  if(status == 1) //close...
  {
      newTr.style.color="#f00";
   newTr.style.background="#0ff";
   //newTr.style.background="#f00";
  }


     //添加列
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        var newTd2 = newTr.insertCell();
  var newTd3 = newTr.insertCell();

            //设置列内容和属性

        newTd0.innerHTML = boxId;
        newTd1.innerHTML = parentId;

        newTd2.innerHTML = status;
  newTd3.innerHTML = onlinedate;
//            saveTableValue();//保存值
        return false;
}

        //删除一行
function deleRow()
{
    //获得行索引
    //两个parentElement分别是TD和TR，rowIndex是TR的属性
var boxTable = document.getElementById("boxlog");
    var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;

    boxTable.deleteRow(cGetRow);

// saveTableValue();//保存值
return false;
}

function makeSortable(table) {
    var headers=table.getElementsByTagName("th");
var rankicon = table.getElementsByTagName("i");
//alert(rankicon.length);
    for(var i=0;i<headers.length;i++)
{
        (function(n)
  {
            var flag=false;
            headers[n].onclick=function()
   {
    var thval = headers[n].getElementsByTagName("i");

    if(rankicon[n].className == "fa fa-chevron-up")
    {
     rankicon[n].setAttribute("class","fa fa-chevron-down");
    }
    else
    {
     rankicon[n].setAttribute("class","fa fa-chevron-up");
    }
//var testval=headers[n].textContent||cell1.innerText;//获得文本内容
  //alert(n);

                // sortrows(table,n);
                var tbody=table.tBodies[0];//第一个<tbody>
    //alert(tbody);
                var rows=tbody.getElementsByTagName("tr");//tbody中的所有行
                rows=Array.prototype.slice.call(rows,0);//真实数组中的快照

                //基于第n个<td>元素的值对行排序
                rows.sort(function(row1,row2){
                    var cell1=row1.getElementsByTagName("td")[n];//获得第n个单元格

                    var cell2=row2.getElementsByTagName("td")[n];
                    var val1=cell1.textContent||cell1.innerText;//获得文本内容
                    var val2=cell2.textContent||cell2.innerText;

                    if(val1<val2){
                        return -1;
                    }else if(val1>val2){
                        return 1;
                    }else{
                        return 0;
                    }
                });
                if(flag){
                    rows.reverse();
                }
                //在tbody中按它们的顺序把行添加到最后
                //这将自动把它们从当前位置移走，故没必要预先删除它们
                //如果<tbody>还包含了除了<tr>的任何其他元素，这些节点将会悬浮到顶部位置
                for(var i=0;i<rows.length;i++){
                    tbody.appendChild(rows[i]);
                }

                flag=!flag;
            }
        }(i));
    }
}
function initTable()
{
   var boxTable = document.getElementById("boxlog");
   var headers=boxTable.getElementsByTagName("th");
var _img = document.createElement("img");
_img.setAttribute("id", "floatImage");
_img.setAttribute("src", "icon/箭头下.png");

_img.setAttribute("align", "left");
_img.setAttribute("height", "15px");
_img.setAttribute("width", "15px");

//_img.setAttribute("onclick", "clickImage()");
//_img.onclick = function(){ //点击时响应事件
//makeSortable(boxTable);
//window.location = "http://baidu.com"; 跳转url
//};

   for(var i=0;i<headers.length;i++)
   {
       headers[i].appendChild(_img);
   }
}
window.onload = function()
{
//initTable();

// addRows('B170000004','G1788889','0','2017-08-15 14:40:00');
showBoxStatus();

setInterval(showBoxStatus, 3000);
}
</script>
</head>
<body>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>

<nav class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Management</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>
</nav>

<h1>Temperatures Status</h1>

</body>
</html>

转载于:https://my.oschina.net/u/3428739/blog/1517414