文档章节

html 5

m
 mooboo
发布于 2017/08/19 20:47
字数 892
阅读 3
收藏 0

<!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>


<script>
var count = 0;
var boxDate='2017-08-15 14:40:00';
var xmlHttp;
function showTemps()
{
   var id = "temp" + 1;
   var li = document.getElementById(id);
   li.innerHTML = "The temperatures is: 111.";
}
function handleRefresh()
{
 var li = document.getElementById("temp1");
 li.innerHTML ="The temperatures is:" + count;
 count++;
 //alert("I'm alive");
}

function GetXmlHttpObject()
{
 var xmlHttp=null;
 try
  {
   // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
  }
 catch (e)
  {
  //Internet Explorer
   try
    {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
   catch (e)
    {
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
 return xmlHttp;
}

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>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Management</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</nav>

<h1>Temperatures Status</h1>

<table id="boxlog" class="gridtable"> 
    <thead> 
        <tr> 
            <th>盒子编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th>网关编号<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th>盒子状态<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th> 
            <th>刷新时间<i id="tbrankIcon" class="fa fa-chevron-down" aria-hidden="true"></i></th>                       
        </tr> 
    </thead> 
   <tbody id="tbMain"></tbody>
 </table>   
<p>
<div id="txtHint"><b></b></div>
</p>

</body>
</html>

© 著作权归作者所有

上一篇: getdat.php
下一篇: linearlayout test
m
粉丝 0
博文 20
码字总数 11262
作品 0
英国
私信 提问
HTML5 的标签大全以及相关属性

HTML 5 中的新特性包括了嵌入音频、视频和图形的功能,客户端数据存储,以及交互式文档。 HTML 5 还包含了新的元素,比如: , , 以及 等等。 HTML 5 工作组包括:AOL, Apple, Google, IBM, ...

红薯
2011/04/14
14.6K
1
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
当 HTML 5 遇见 Google

在 Google I/O 的开发者大会,Google 工程副总裁 Vic Gundotra 表示了他们对下一代 HTML 语言,HTML 5 的承诺。尽管 HTML 5 还处在草案阶段,W3C 的委员会还在针对这一草案进行漫长的讨论,然...

红薯
2009/06/01
996
2
HTML 5的革新:结构之美

作者:Mr.Think   前言HTML 5如同一场革命,正在Web2.0后时代轰轰烈烈的进行着。HTML 5是什么,无须我在这里赘述了。对于HTML 5的革新,按我的理解,可以总结为语义明确的标签体系、化繁为简...

awbeci
2011/05/08
0
0
《HTML 5实战》书评赠书活动,正逢读书好时节

阳春三月,正是读书好时节! 华章公司&开源中国联合举办读样章赠图书活动,免费赠送《HTML 5实战》10册! 特别提示:本书的作者陶国荣先生曾做客Oschina,在“OSCHINA第9期高手问答 主题:H...

刘静
2012/03/05
4.4K
86

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
3
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部