JSP滚动展示数据Web端动态数据展示定时请求刷新

最新推荐文章于 2023-12-01 14:15:17 发布

原创最新推荐文章于 2023-12-01 14:15:17 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#滚动展示 #定时滚动展示 #数据滚动

前端_JavaScript、Jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在应急指挥系统中使用动态滚动方式展示应急响应情况的方法。通过后端获取实时数据，前端利用HTML、CSS和JavaScript实现信息的动态更新与滚动显示，确保应急人员的响应状态能够被及时跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：应急指挥系统需要动态滚动展示应急人员是否已经响应到了应急事件预案。
后端代码我就不写在博客里面了，数据自己可以去拼接。

效果图：
在这里插入图片描述
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;
}