<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混漆房油漆加注</title> <link href="Board.css" rel="stylesheet" /> <script src="jquery-1.8.0.min.js"></script> <script> $(function () { setInterval("getDate()", 1000); setInterval("initTable()", 60000*5); initTable(); }); function getDate() { var today = new Date(); $("#DivTimer").html( "<br>" + today.Format("yyyy-MM-dd hh:mm:ss") + "<br>" ); } function initTable() { var content1 = ""; //油漆桶 var content2 = ""; //油漆零件号 var content3 = ""; //油漆颜色 var content4 = ""; //操作时间 var content5 = ""; //状态 $.ajax({ type: "GET", url: "http://10.60.101.59:8013/PaintWebservice.ashx?method=GetPaintRecord", dataType: "json", success: function (result) { var dataList = result.DataList; var infoList = []; var wrapper = $("#scrollEle"); dataList.forEach((item) => { let ele = `<tr class="item"> <td class="tdContent">${item.BucketCode}</td> <td class="tdContent">${item.PaintCode}</td> <td class="tdContent">${item.PaintName}</td> <td class="tdContent">${item.CreateTime}</td> <td class="tdContent">${item.BucketState}</td> </tr>`; infoList.push(ele); }); $("#scrollEle").html(infoList.join("")); // 设置计时器,每隔2秒执行一次(变换一次) var timer = null; timer = setInterval(function () { // 将第一行item移到最后一行,其他的往上挪填补空缺位 var infoItemTmp = infoList.shift(); $("#scrollEle").append(infoItemTmp); $(".item:first").remove(); infoList.push(infoItemTmp); }, 2000); }, }); } function GetNum(num) { if (num != null) { return num; } else { return "0"; } } // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 S: this.getMilliseconds(), //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace( RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length) ); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace( RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length) ); return fmt; }; </script> </head> <body> <table class="TableFrame"> <tr> <td> <table id="TableTitle"> <tr> <td id="tdImg" style="width: 10%"><img id="Img" /></td> <td id="Title" style="width: 60%"> 混漆房油漆加注 </td> <td style="border-right: hidden; text-align: center"> <div id="DivTimer"></div> </td> </tr> </table> </td> </tr> <tr> <td> <table class="TableFrame"> <thead style="height: 20%"> <tr> <td class="tdTitle">油漆桶</td> <td class="tdTitle">油漆零件号</td> <td class="tdTitle">油漆颜色</td> <td class="tdTitle">操作时间</td> <td class="tdTitle">状态</td> </tr> </thead> <tbody id="scrollEle"></tbody> </table> </td> </tr> </table> </body> </html>