简单的投屏、数据大屏前端代码

最新推荐文章于 2024-05-30 03:47:41 发布

sunon_

最新推荐文章于 2024-05-30 03:47:41 发布

阅读量2.8k

点赞数

分类专栏：网站文章标签： html javascript

本文链接：https://blog.csdn.net/sunon_/article/details/109774163

版权

网站专栏收录该内容

23 篇文章 2 订阅

订阅专栏

大厅投屏显示表格数据，无缝滚动，数据30分钟刷新一次(自己设置，用定时器刷新ajax)

页面样式：

效果展示：http://www.zjhuiwan.cn/blogImg/upload/ueditorVideo/20201118/160568355027930009717.mp4

页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="refresh" content="1800" />
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;list-style: none;text-decoration: none;font-family: "微软雅黑";box-sizing: border-box;}
			.content{width: 1920px;height: 1080px;background: url(img/bg.png) no-repeat top left;padding: 0 55px;}
			.itemList{text-align: center;}
			.item{overflow: hidden;display: inline-block;margin-right: 75px;}
			.item:last-child{margin-right: 0;}
			.item img{float: left;}
			.item div{float: right;text-align: left;}
			.item div p{color: #a7fef8;font-size: 24px;}
			.item div span{color: #00fcff;font-size: 24px;}
			.date{color: #11eef6;font-size: 24px;margin-bottom: 30px;padding-left: 10px;}
			.listBG{background: url(img/bg2.png) no-repeat top left; width: 100%;height: 760px;padding: 0 55px;}
			.ul{padding-top: 20px;}
			.li{color: #fff;font-size: 24px;height: 65px;line-height: 65px;overflow: hidden;}
			.li:nth-child(2n){background: #0e235e;}
			
			.li div{float: left;width: 26%;text-align: center;}
			.li div:first-child{width: 15%;margin-right: 6%;}
		</style>
	</head>
	<body>
		<div class="content">
			<div style="width: 100%;height: 140px;"></div>
			<div class="itemList">
				<div class="item">
					<img src="img/1 (1).png"/>
					<div>
						<p>今日完成量(张)</p>
						<span id="daynum"></span>
					</div>
				</div>
				<div class="item">
					<img src="img/1 (2).png"/>
					<div>
						<p>本月完成量(张)</p>
						<span id="monthnum"></span>
					</div>
				</div>
				<div class="item">
					<img src="img/1 (3).png"/>
					<div>
						<p>本年完成量(张)</p>
						<span id="yearnum"></span>
					</div>
				</div>			
			</div>
			<div class="date"><span id="now"></span>排行</div>
			<div class="listBG">
				<div class="ul">
					<div class="li" style="color: #4dbdff;"><div>序号</div><div>员工工号</div><div>员工姓名</div><div>完成量</div></div>
					<div id="ul"  style="overflow:hidden;height:645px">
						<div id ="showinfo" >
							
						</div>
						<div id ="showinfo2" ></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$.ajax({
                url: 'http://localhost:8080/jjc_war_exploded/cardRecord/getRecordList.do',
                type: "GET",
                dataType: "json",
                async: true,
                success: function(data){
                    console.log(data);
					var str = '';	
					var i = 1;
					$.each(data.dataList,function(index,element){
						str += '<div class="li"><div>'+i+'</div><div>'+element.number+'</div><div>'+element.name+'</div><div>'+element.overnum+'</div></div>';
						i++;
					})
					$('#showinfo').html(str);
					$('#daynum').text(data.daynum);
					$('#monthnum').text(data.monthnum);
					$('#yearnum').text(data.yearnum);
					$('#now').text(data.now);
					if(i>10){
					window.onload = roll(50);
					}
					
                }
            })
			
			
 
    // 传入的 t 为滚动快慢的时间
    function roll(t) {
      let ul1 = document.getElementById("showinfo");
      let ul2 = document.getElementById("showinfo2");
      let box = document.getElementById("ul");
      ul2.innerHTML = ul1.innerHTML;
      // 初始化滚动高度
      box.scrollTop = 0;
      let timer = setInterval(function(){
			console.log(box.scrollTop+"_____"+ul1.scrollHeight);
			if (box.scrollTop >= ul1.scrollHeight) {
				box.scrollTop = 0;
			} else {
				box.scrollTop++;			
			}
		}, t);
		
		 box.onmouseover = function () {
		
           clearInterval(timer)
         }
         box.onmouseout = function () {
           timer = setInterval(function(){
			   if (box.scrollTop >= ul1.scrollHeight) {
					box.scrollTop = 0;
				} else {
					box.scrollTop++;
				}
			}, t);
         }
         
    }

	</script>
</html>

查看我的个人博客：ZJBLOG