<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="layui/jquery.min.js"></script>
<style type="text/css">
table {
width: 100%;
border: 1px solid gray;
border-collapse: collapse;
}
#box {
width: 100%;
height: 300px;
overflow: hidden;
}
/*th, td {*/
/* width: 20%;*/
/* height: 50px;*/
/* line-height: 35px;*/
/* border: 1px solid gray;*/
/* text-align: center;*/
/*}*/
</style>
</head>
<body>
<h3>公告列表</h3>
<table>
<tr id="notice-th">
</tr>
</table>
<div id="box">
<table id="con1">
</table>
<table id="con2"></table>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
var speed = 30;
window.onload = function () {
$.ajax({
url: '/getNotice',
contentType:'application/json;charset=UTF-8',
type: 'get',
dataType: 'json',
success: function (res) {
var thList = res.data.thlist
var tdList = res.data.tdlist
var noticeth = document.getElementById("notice-th");
var thStr = '';
var tdStr = '';
$.each(thList,function (index,item) {
thStr += '<th>' + item + '</th>';
})
noticeth.innerHTML = thStr;
$.each(tdList,function (index,item) {
var tdbean = item;
tdStr += '<tr>';
$.each(thList,function (index1,thname) {
tdStr += '<td>' + tdbean[thname] + '</td>';
})
tdStr += '</tr>'
})
con1.innerHTML = tdStr
con2.innerHTML = con1.innerHTML;
var ths = document.getElementsByTagName("th")
var tds = document.getElementsByTagName("td")
var wid = (1/thList.length)*100 + "%"
console.log(wid)
for (var j = 0; j < thList.length; j++) {
ths[j].setAttribute("style","width: " + wid + ";height: 50px;line-height: 35px;border: 1px solid gray;text-align: center;")
}
for (var j = 0; j < tds.length; j++) {
tds[j].setAttribute("style","width: " + wid + ";height: 50px;line-height: 35px;border: 1px solid gray;text-align: center;")
}
},
error: function () {
console.log("请求异常！")
}
})
}
function ScrollUp() {
if (box.scrollTop >= con1.scrollHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
console.log(con1.scrollHeight)
console.log(box.scrollTop)
}
var i = setInterval("ScrollUp()", speed);
box.onmouseenter = function () {
Stop()
}
box.onmouseleave = function () {
Up()
}
function Stop() {
clearInterval(i);
}
function Up() {
i = setInterval("ScrollUp()", speed);
}
</script>
</body>
</html>
网友评论