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

大厅投屏显示表格数据，无缝滚动，数据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

简单的投屏、数据大屏前端代码相关推荐

Hologres 助力飞猪双11实时数据大屏秒级响应
摘要:刚刚结束的2020天猫双11中,MaxCompute交互式分析(下称Hologres)+实时计算Flink搭建的云原生实时数仓首次在核心数据场景落地,为大数据平台创下一项新纪录.借此之际,我们将 ...
可视化搭建数据大屏系统的前端实现
随着公司业务的发展,经常会收到一些数据大屏的需求.目前我司有两种实现方案,一是人肉搭建,二是用阿里云 DataV 搭建. 人肉搭建,在本地脚手架开发环境中进行编码,有大量的重复劳动,能力复用性差,占用 ...
用 Python 制作数据大屏，超简单
作者 | 俊欣来源 | 关于数据分析与可视化今天我们用Streamlit模块来制作一个数据面板,将数据更加直观地呈现给别人观看,整个页面大致如下图所示: 制作工具栏在页面的左侧是一个工具栏,工具 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
前端可视化数据大屏（1）
效果图技术架构:datav,vue2,echarts 我们一步一步的来实现一个简单的可视化数据大屏,开始吧!! 1,vue脚手架搭建项目太简单了,百度上可以搜索,我这里就不多说了,把router装 ...
手机改小视窗什么意思_简单几步教你如何将手机投屏到电视，1秒小屏变大屏！...
原标题:简单几步教你如何将手机投屏到电视,1秒小屏变大屏! Hi,大家好,我是小雨!最近有人在后台咨询小雨,怎样将手机画面投屏到电视上,让手机的小屏变大屏.今天小雨就来和大家一起聊一聊这个问题,简单几 ...
前端基础第二天项目大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
数据可视化系列-04数据大屏基础知识
文章目录 5.销售数据看板 5.1 了解数据大屏基础知识 1.数据大屏简介: 2.数据大屏使用场景 3.数据大屏分类 5.2 数据大屏的设计: 1.大屏前端设计流程 2.数据大屏设计尺寸解析 3.可视 ...
Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍实验介绍在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
数据大屏可视化展示系统有什么作用
数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业的各种数据,帮助管理人员分析各 ...

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

简单的投屏、数据大屏前端代码相关推荐

最新文章

热门文章