全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】

news/2024/4/29 21:55:42/文章来源:https://blog.csdn.net/weixin_52212950/article/details/126817258

源码获取方式:

数据滚动大屏源码,原生js实现超级简单-Javascript文档类资源-CSDN下载原生js实现的数据滚动大屏案例,实现应该是全网最简单的,拿来直接使用即可,没有会员的小伙伴去我文章主更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/86513923


没有会员的小伙伴直接私聊我“数据滚动”即可我可以给你单独打包发去(免费的!)


案例展示:

功能说明:

本案例功能为数据自动滚动,可搭配后端进行数据实时的可视化添加,光标移动到屏幕处可以暂停滚动,移开继续滚动

  

另外,本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用,如果有需要可以将本案例中数据的表格的td数据信息换为用户个人信息的主页链接,这样光标移上暂停滚动后可以对用户主页信息进行查看,另外如果整个代码直接搬用复制到各位大佬的网站页面,可能会出现一些不可预估的错位,因为本案例是设置的居中屏幕的


实现代码:

实现原理:

本案例实现也非常简单,既然是滚动效果,必然是少不了 setInterval 定时器,由于增加了光标放上去滚动暂停以及光标移开滚动继续,所以需要两次定时器的设置,移开之后需要再是指一次定时器,这里我们为了方便就可以将定时器单独封装成一个函数,在定时器内调用该函数即可,另外,我们还需要在鼠标移上之后清除一次所有正在工作的定时器,这是为了解决速度叠加问题,如果不清除,那么每次移上都会加速一次。最后一个注意点是:光标移开的定时器命名不能使用局部变量,否则清除定时器会失效。

<script> document.addEventListener('DOMContentLoaded',function(event){var inner=document.querySelector('.innerbg');var screen=document.querySelector('.screen');var mask=document.querySelector('.mask')console.log(inner.offsetHeight);var timer=window.setInterval(animate,12)function animate(){if(inner.offsetTop===-(inner.offsetHeight-screen.offsetHeight+10)){inner.style.top=0+'px'}else{var l=inner.offsetTop;l=l-1;inner.style.top=l+'px'}}mask.addEventListener('mouseover',function(){window.clearInterval(timer)})mask.addEventListener('mouseout',function(){ timer=window.setInterval(animate,12)})})</script>

 布局代码:

<div class="background"><div class="border"><div class="lt"></div><div class="rt"></div><div class="lb"></div><div class="rb"></div></div></div><div class="screen"><div class="mask"></div><div class="innerbg">       <table cellspacing="0"><tr><td>IP 196.168.123.134 以游客访问该网站</td></tr><tr><td>IP 110.168.123.134 以游客访问该网站</td></tr><tr><td>IP 106.168.123.134 以游客访问该网站</td></tr><tr><td>IP 186.168.123.134 以游客访问该网站</td></tr><tr><td>IP 161.168.123.134 以游客访问该网站</td></tr><tr><td>IP 116.168.123.134 以游客访问该网站</td></tr><tr><td>IP 145.168.123.134 以游客访问该网站</td></tr><tr><td>IP 126.168.123.134 以游客访问该网站</td></tr><tr><td>IP 196.168.123.134 以游客访问该网站</td></tr><tr><td>IP 161.168.123.134 以游客访问该网站</td></tr><tr><td>IP 116.168.123.134 以游客访问该网站</td></tr><tr><td>IP 145.168.123.134 以游客访问该网站</td></tr><tr><td>IP 126.168.123.134 以游客访问该网站</td></tr><tr><td>IP 196.168.123.134 以游客访问该网站</td></tr>  </table></div></div>

再带大家复习一下定时器的相关知识:

 setInterval ( 回调函数,延迟的毫秒数 )

记住这个定时器的回调函数时间每过一次就会执行一次,两种函数写法与 setTimeout 相同

<script>window.setInterval(function(){alert('时间到啦');},4000)</script>

注意点:

  • window 可以省略
  • 可以采用直接写函数或写函数名
  • 时间一定要写成毫秒数
  • 页面中可能有很多定时器,最好设置标志符号,var time1= window.setTimeout(fn,2000)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_6545.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Python实现的遗传算法求TSP问题

遗传算法求TSP问题 目录 人工智能第四次实验报告 1 遗传算法求TSP问题 1 一 、问题背景 1 1.1 遗传算法简介 1 1.2 遗传算法基本要素 2 1.3 遗传算法一般步骤 2 二 、程序说明 3 2.3 选择初始群体 4 2.4 适应度函数 4 2.5 遗传操作 4 2.6 迭代过程 4 三 、程序测试 5 3.1 求解…

Vue3+elementplus搭建通用管理系统实例七:通用表格实现上

一、本章内容 使用配置的方式实现表格的界面的自动生成、自动解析实体配置信息,并生成表格列、筛选项等功能,完整课程地址 二、效果预览 三、开发视频

动手实现深度学习(12): 卷积层的实现

9.1 卷积层的运算 传送门: https://www.cnblogs.com/greentomlee/p/12314064.html github: Leezhen2014: https://github.com/Leezhen2014/python_deep_learning 卷积的forward 卷积的计算过程网上的资料已经做够好了,没必要自己再写一遍。只把资料搬运到这里: http://deepl…

【进击的JavaScript|高薪面试必看】JS基础-作用域和闭包

六年代码两茫茫&#xff0c;不思量&#xff0c;自难忘 6年资深前端主管一枚&#xff0c;只分享技术干货&#xff0c;项目实战经验&#xff0c;面试指导 关注博主不迷路~ 本系列文章是博主精心整理的面试热点问题&#xff0c;吸收了大量的技术博客与面试文章&#xff0c;总结多年…

Java毕设项目——网上宠物店管理系统(java+SSM+Maven+Mysql+Jsp)

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM 技术&#xff1a;Jsp JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a…

收银台——Web自动化测试

目录 一&#xff0c;收银台项目的主要功能&#xff1a; 二&#xff0c;Web自动化测试 一&#xff0c;Web自动化测试&#xff0c;设计测试用例 二&#xff0c;编写测试用例代码 三&#xff0c;测试结果&#xff1a; 四&#xff0c;总结&#xff1a; 一&#xff0c;收银台项…

JVM监控:JMX组件与底层原理

JMX(Java Management Extensions)是一个为应用程序植入管理功能的框架 &#xff0c;从Java5.0开始引入到标准Java技术平台中。JMX是一套标准的代理和服务&#xff0c;实际上&#xff0c;用户可以在任何Java应用程序中使用这些代理和服务实现管理。 其实JMX也可以看作一个框架&a…

一建报名重大变动 部分专业考生2022年不能报名一级建造师考试?

2022年度一级建造师资格考试报名证明事项实行告知承诺制&#xff0c;应试人员须通过中国人事考试网的全国专业技术人员资格考试报名服务平台进行网上注册、报名和缴费。 云南报名时间&#xff1a;2022年9月14日—9月21日&#xff1b;缴费截止时间&#xff1a;9月14日—9月23日…

【Android】App开发-控件篇

App开发是一个工作量比较大的项目&#xff0c;要学习App开发首先我们要先去学习手机中的各类工具和信息是怎么运行的&#xff0c;我们可以使用哪些工具来对手机进行设置。这里我采用的开发工具是Android studio。 目录 Textview控件 文本框控件&#xff1a; 阴影/模糊度控件…

第12章 软件测试基础 12.1-软件测试 12.2-验证与确认 12.3-软件缺陷

目录 一、软件测试基础主要内容 二、软件测试 1、软件测试的定义 2、软件测试的对象 3、软件测试的目的 4、考点 &#xff08;1&#xff09;软件测试的目的 &#xff08;2&#xff09;软件测试的对象 三、验证与确认 1、验证&#xff08;Verification&#xff09; 2、确认&…

pycharm安装opencv-python报错

嘿嘿&#xff0c;大家好&#xff0c;我又遇到拦路的小可爱了&#xff01; 报错内容 3): Read timed out. WARNING: You are using pip version 21.3.1; however, version 22.2.2 is available. You should consider upgrading via the E:\daimabao\python\bigdata\Scripts\pyt…

【小月电子】安路国产FPGA开发板系统学习教程-LESSON7串口通信

串口通信例程讲解若要观看该博客配套的视频教程&#xff0c;可点击此链接根据多年工作经验&#xff0c;总结出的FPGA的设计流程&#xff0c;概括起来总共有以上12步&#xff0c;其中根据项目难易度可省去其中一些步骤。比如非常简单的项目&#xff0c;我们可以省去虚线框里面的…

【数据结构】二叉树的遍历

文章目录 5.3 二叉树的遍历 5.3.1 概述 5.3.2 遍历方式【重点】 5.3.3 遍历方式&#xff1a;递归实现【重点】 5.3.4 遍历方式&#xff1a;非递归实现 5.3 二叉树的遍历 5.3.1 概述 二叉树的遍历&#xff1a;沿着某条搜索路径对二叉树中的结点进行访问&#xff0c;使得每…

grpc|protobuf的安装、编译、运行笔记(C++)

一、下载grpc源码 如果你的电脑/服务器可以做代理&#xff0c;然后稳定链接上 GitHub 那么完全可以按照 GitHub 的官方文档来操作&#xff0c;我这里采用 Gitee 镜像来操作 git clone https://gitee.com/jiangxy__loey/grpc.git二、下载依赖库 进入grpc目录&#xff0c;然后…

为什么残差连接的网络结构更容易学习?

为什么残差连接的网络结构更容易学习&#xff1f; 【写在前面】 不仅仅在resnet中&#xff0c;在各种网络结构中大家都喜欢使用残差连接的设计&#xff0c;并声称这有利于网络的优化&#xff0c;这是为什么呢&#xff1f;能给出一个有说服力的答案吗&#xff1f; Why the re…

1.数据校验-拦截器-全局异常-json数据处理

目录 1.数据校验-拦截器-全局异常-json数据处理 1. JSR303 2. JSR303中含有的注解 3. spring中使用JSR303进行服务端校验 3.1 导入依赖包 3.2 添加验证规则 3.3执行校验 3.4 错误信息的展示 4. SpringMVC定义Restfull接口 5.1 增加spring配置 5.2 Controller 5.3 格…

Mstsc(远程桌面连接)命令的高级用法

Mstsc远程桌面连接,这个是微软操作系统自带的一个命令,相信很多人都用过,但是如果说这个命令还有高级用法,估计很多人都没有用过,其实这个命令还是很强大的,今天咱们就来说一下mstsc的高级用法Mstsc远程桌面连接,这个是微软操作系统自带的一个命令,相信很多人都用过,但…

20220912--CSP-S模拟4

A. 石子游戏 B. 大鱼吃小鱼 C. 黑客 D. 黑客-续A. 石子游戏 首先了解一个叫做 \(\operatorname{Nim}\) 游戏的玩意 通常的 \(\operatorname{Nim}\) 游戏的定义是这样的: 有若干堆石子,每堆石子的数量都是有限的,合法的移动是“选择一堆石子并拿走若干颗(不能不拿)” 如果轮…

自制操作系统日志——第十二天

自制操作系统日志——第十二天 从今天开始&#xff0c;我们将花费两天的时间来进行计算机中定时器的制作。有了定时器后&#xff0c;才能够为程序和cpu更加便利的进行计时。可能会稍难一些了&#xff01;&#xff01;&#xff01; 做好准备&#xff0c;冲&#xff01;&#xf…

ConcurrentLinkedQueue解析

概述 ConcurrentLinkedQueue实际对应的是LinkedList,是一个线程安全的无界队列&#xff0c;但LinkedList是一个双向链表&#xff0c;而ConcurrentLinkedQueue是单向链表。ConcurrentLinkedQueue线程安全在于设置head、tail以及next指针时都用的cas操作&#xff0c;而且node里的…