<!DOCTYPE html>
<html>
<head>
<title>FLAPPER</title>
<link href="css/flapper2.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.11.0.min.js"></script>
<script src="src/jquery.transform-0.9.3.min.js"></script>
<script src="src/jquery.flapper2.js"></script>
<script language="javascript">
$(document).ready(function() {
setTimeout(function(){
var toggle = false;
GetList(GetData(0))
var totcout=3;
var page=0;
setInterval(function(){
page = Math.floor(Math.random() *3);
if (toggle) {
GetList(GetData(page))
} else {
GetList(GetData(page))
}
toggle = !toggle;
}, 5000);
}, 1000);
});
function GetData(i)
{
var per=[
{"id":1,"bus":"G2345","station":"广州南1","time":"11：23","enter":"A入口/B入口","status":"正点"},
{"id":2,"bus":"G1345","station":"上海南","time":"11：43","enter":"A入口/B入口","status":"正点"},
{"id":3,"bus":"G1345","station":"济南","time":"11：13","enter":"A入口/B入口","status":"正点"},
{"id":4,"bus":"G1345","station":"南昌东","time":"11：23","enter":"A入口/B入口","status":"晚点"},
{"id":5,"bus":"G1345","station":"广州东","time":"11：53","enter":"A入口/B入口","status":"晚点"},
{"id":6,"bus":"G1345","station":"深圳","time":"11：33","enter":"A入口/B入口","status":"正点"}
];
var per2=[
{"id":1,"bus":"G2545","station":"广州东2","time":"10：23","enter":"A入口/B入口","status":"晚点"},
{"id":2,"bus":"G4345","station":"上海","time":"11：43","enter":"A入口/B入口","status":"正点"},
{"id":3,"bus":"G3345","station":"济南东","time":"11：13","enter":"A入口/B入口","status":"正点"},
{"id":4,"bus":"G6345","station":"南昌","time":"11：23","enter":"A入口/B入口","status":"正点"},
{"id":5,"bus":"G8345","station":"广州","time":"11：53","enter":"A入口/B入口","status":"正点"},
{"id":6,"bus":"G9345","station":"深圳东","time":"11：33","enter":"A入口/B入口","status":"正点"}
];
var per3=[
{"id":1,"bus":"G0545","station":"济南东3","time":"10：23","enter":"A入口/B入口","status":"晚点"},
{"id":2,"bus":"G345","station":"上海","time":"13：43","enter":"A入口/B入口","status":"正点"},
{"id":3,"bus":"G385","station":"南昌东","time":"14：13","enter":"A入口/B入口","status":"正点"}
];
if(i==0)
return per;
else if(i==1)
return per2;
else
return per3;
}
</script>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: white;
font-family: Helvetica, Arial, sans-serif;
color:#FFFFFF;
}
td{ height:30px}
</style>
</head>
<body>
<table width="100%" align="center" cellpadding="10" cellspacing="5" border="0" bgcolor="#0000FF">
<thead>
<tr bgcolor="#3c67f5">
<td align="center">车次</td>
<td align="center">终点站</td>
<td align="center">到点</td>
<td align="center">入站口</td>
<td align="center">状态</td>
</tr>
</thead>
<tbody id="tbMain"></tbody>
<!--<tr id="tr1">
<td align="center"><label class="f1">G2345</label></td>
<td align="center">广州南</td>
<td align="center">11：23</td>
<td align="center">A入口，B入口</td>
<td align="center">正点</td>
</tr>
<tr>
<td align="center">G1345</td>
<td align="center">上海南</td>
<td align="center">11：23</td>
<td align="center">A入口，B入口</td>
<td align="center">正点</td>
</tr>
<tr>
<td align="center">G1345</td>
<td align="center">上海南</td>
<td align="center">11：23</td>
<td align="center">A入口，B入口</td>
<td align="center">正点</td>
</tr>
<tr>
<td align="center">G1345</td>
<td align="center">上海南</td>
<td align="center">11：23</td>
<td align="center">A入口，B入口</td>
<td align="center">正点</td>
</tr>
<tr>
<td align="center">G1345</td>
<td align="center">上海南</td>
<td align="center">11：23</td>
<td align="center">A入口，B入口</td>
<td align="center">晚点15分钟</td>
</tr>
--></table>
<script>
function GetList(per)
{
$("#tbMain").html("")
var tbody = document.getElementById('tbMain');
for(var i = 0;i < per.length; i++){
var trow = getDataRow(per[i],true);
tbody.appendChild(trow);
}
if(per.length<6)
{
for(var i = 0;i < 6-per.length; i++){
var trow = getDataRow(per[i],false);
tbody.appendChild(trow);
}
}
}
function getDataRow(h,empty){
var row = document.createElement('tr'); //创建行
row.setAttribute('bgcolor','#3c67f5')
var idCell = document.createElement('td');
idCell.innerHTML = empty?h.id:"";
// row.appendChild(idCell);
var busCell = document.createElement('td');
busCell.innerHTML = empty?h.bus:"";
busCell.setAttribute('align','center');
row.appendChild(busCell);
var stationCell = document.createElement('td');
stationCell.innerHTML = empty?h.station:"";
stationCell.setAttribute('align','center');
row.appendChild(stationCell);
var timeCell = document.createElement('td');
timeCell.innerHTML = empty?h.time:"";
timeCell.setAttribute('align','center');
row.appendChild(timeCell);
var enterCell = document.createElement('td');
enterCell.innerHTML = empty?h.enter:"";
enterCell.setAttribute('align','center');
row.appendChild(enterCell);
var statusCell = document.createElement('td');
statusCell.innerHTML =empty? h.status:"";
statusCell.setAttribute('align','center');
row.appendChild(statusCell);
return row; //返回tr数据
}
</script>
</div>
</body>
</html>
