场景：应急指挥系统需要动态滚动展示应急人员是否已经响应到了应急事件预案。
后端代码我就不写在博客里面了，数据自己可以去拼接。
效果图：
html代码：
<div class="right"> <div id="opendatalist"> <div id="demo" style=""> <div id="demo1"> <table id='optTable'> </table> </div> <div id="demo2"></div> </div> </div> </div> JavaScript代码：
<script type="text/javascript"> //数据的滚动需要在jsp的css文件设置对应的样式 var demo = document.getElementById('demo'); var demo1 = document.getElementById('demo1'); var demo2 = document.getElementById('demo2'); var speed = 20;//滚动的速度 demo2.innerHTML = demo1.innerHTML; function getData() { var emergencyInfoId=$(" #emergencyInfoId ").val(); $.ajax({ type : "post", url : "${ctx}/emergencySystem/selectReadMessage",//替换为自己的请求地址 dataType : "json", data:{emergencyInfoId:emergencyInfoId}, success : function(data) { var list=data.listSend; $("#optTable tbody").html(""); insertDiv(list); } }); } function insertDiv(list) { var $mainDiv = $("#optTable"); var html = ''; for ( var i in list) { console.log(list[i]); html +="<div style="+"margin-top:-13%"+">";//此处拼接内容 html +="<button class="+"btn"+" "+"style="+"margin-top:20%"+">"+list[i].position+"</button>"; if(list[i].creationTime!=null){ time=strFormat(list[i].creationTime); html +="<span class="+"info"+">"+list[i].name+"："+"<span style="+"color:#5DC915"+">"+list[i].sendType+"</span>"+""; }else{ time="--"; html +="<span class="+"info"+">"+list[i].name+"："+"<span style="+"color:red"+">"+list[i].sendType+"</span>"+""; } html +="<span >"+"响应时间："+"<span>"+time +"</span>"+"</span>"+" </span>"; html +="</div>" ; } $mainDiv.append(html); demo2.innerHTML = demo1.innerHTML; } function Marquee() { if (demo2.offsetTop - demo.scrollTop <= 0) { demo.scrollTop -= demo1.offsetHeight; getData(); } else { demo.scrollTop++; } } var MyMar = setInterval(Marquee, speed); //时间格式的转换 function strFormat(str) { var date = new Date(str); var year = date.getFullYear().toString(); var month = (date.getMonth() + 1); var day = date.getDate().toString(); var hour = date.getHours().toString(); var minutes = date.getMinutes().toString(); var seconds = date.getSeconds().toString(); if (month < 10) { month = "0" + month; } if (day < 10) { day = "0" + day; } if (hour < 10) { hour = "0" + hour; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds; }; </script> CSS样式必须写进去：
.left { float: left; margin-left: 10%; width: 40%; } #opendatalist { width: 50%; height: 30%; float: left; } #opendatalist #demo { margin-left: 1%; overflow: hidden; width:35%; height: 60%; position: absolute; margin-top: 2%; } #opendatalist #demo table div { /* text-align: center; */ vertical-align: middle; font-size: 16px; /* height: 13%; */ margin-top: -70px; width: 100%; text-align: left; } #opendatalist #demo table { width: 100%; font-size: 0.12rem; } 文章来源: https://blog.csdn.net/qq_35393472/article/details/92003663