1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test01</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="0"/>
<style type="text/css">
.formTable {
border: 1px solid #ccc;
border-collapse: collapse;
width: 100%;
width: 39%;
margin-left: 2%;
margin-top: 3%;
}
.datagrid {
margin: 0;
padding: 0 4px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
height: 33px;
line-height: 33px;
font-size: 18px;
text-align: center;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="alarm_middle">
<table class="formTable">
<tbody>
<tr class="datagrid-row">
<th class="datagrid" width="5%">时间</th>
<th class="datagrid" width="10%">信息</th>
</tr>
<tr>
<td>
<div class="datagrid"></div>
</td>
<td>
<div class="datagrid"></div>
</td>
</tr>
<tr>
<td>
<div class="datagrid"></div>
</td>
<td>
<div class="datagrid"></div>
</td>
</tr>
<tr>
<td>
<div class="datagrid"></div>
</td>
<td>
<div class="datagrid"></div>
</td>
</tr>
<tr>
<td>
<div class="datagrid"></div>
</td>
<td>
<div class="datagrid"></div>
</td>
</tr>
<tr>
<td>
<div class="datagrid"></div>
</td>
<td>
<div class="datagrid"></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function () {
testShow();
})
function testShow() {
let count = 42;
setInterval(function () {
if (count >= 64) {
count = 40;
}
count += 1;
let msg = "";
if (count % 2 == 0) {
msg = "第" + count + "号架过低(测试数据)";
} else {
msg = "第" + count + "号架恢复(测试数据)";
}
appendMsg(getMsgTime(), msg);
}, 1000 * 1.5);
}
function appendMsg(time, msg) {
let trHtml = '<tr>';
trHtml += '<td>';
trHtml += '<div class="datagrid">' + time + '</div>';
trHtml += '</td>';
trHtml += '<td>';
trHtml += '<div class="datagrid">' + msg + '</div>';
trHtml += '</td>';
trHtml += '</tr>';
let count = 0;
let rows = $(".formTable tr");
for (let i = 1; i < rows.length; i++) {
let row = rows[i];
let td1 = $(row).find("td")[0];
let td1Val = $(td1).text();
if (td1Val.trim() != '') {
count += 1;
continue;
}
row.innerHTML = trHtml;
break;
}
if (count >= 5) {
$(rows[1]).remove();
$(".formTable").append(trHtml);
}
}
function getMsgTime() {
function fnW(str) {
let num;
str >= 10 ? num = str : num = "0" + str;
return num;
}
let date = new Date();
let month = date.getMonth() + 1; //当前月份
let data = date.getDate(); //天
let hours = date.getHours(); //小时
let minute = date.getMinutes(); //分
let second = date.getSeconds(); //秒
return fnW(month) + "-" + fnW(data) + " " + fnW(hours) + ":" + fnW(minute) + ":" + fnW(second);
}
</script>
</html>
