位置: IT常识 - 正文

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

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

推荐整理分享全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】(全站怎么使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:全站什么意思,全站使用指南,全站原理,全站使用指南,全站怎么使用,全站原理,全站最简单的我的世界国际版,全站使用指南,内容如对您有帮助,希望把文章链接给更多的朋友!

源码获取方式:

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

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

案例展示:

功能说明:

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

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

另外,本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用,如果有需要可以将本案例中数据的表格的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)
本文链接地址:https://www.jiuchutong.com/zhishi/299179.html 转载请保留说明!

上一篇:ElementUI快速上手(jar包本地下载)(element ui)

下一篇:微信小程序 | 网易云+ChatGPT实现一个智能音乐推荐小程序(微信小程序网页版)

  • 合作社收到政府补助款怎么做分录呢
  • 企业之间的借款利息计入什么科目
  • 坏账准备贷方核算内容
  • 处置无形资产取得的收入计入
  • 房屋预售交款怎么交
  • 滞纳金可以个人承担吗
  • 工程款抵房款账务怎么做
  • 报销车费滴滴怎么打印电子发票
  • 自产自销产品如何入库存
  • 公司缴纳社保要多久
  • 住房公积金做账怎么看交了哪些人
  • 微信收付款认证
  • 其他公司垫付货款合法吗
  • 建筑工程账务处理是在哪个阶段
  • 固定资产处置要交所得税吗
  • 卸载了驱动程序会怎么样
  • getparameter报错
  • 劳务派遣发票备注栏要求
  • Thinkphp5+PHPExcel实现批量上传表格数据功能
  • php模板引擎语法
  • 公司出售已经提完折旧的机器
  • php-cgi
  • 我公司的某供应商英语
  • 增值税发票半年后能冲红
  • 计算机指令用来做什么
  • pc应用是什么意思
  • 黄石国家公园的英语怎么读
  • 不良贷款转让需遵循的原则
  • 代垫运费增值税怎么算
  • iis制作网页
  • 一点分享案例
  • vue3.0配置代理
  • 31.JavaScript数组进阶,一网打尽数组操作函数slice、filter、map、reduce、some、every、find、splice
  • 农民专业合作组织
  • 本地住宿费怎么做账
  • 金税盘减免怎么做分录
  • 新公司建账会计科目
  • 发票走账不走账怎么处理
  • 专项附加扣除中住房租金扣除所指的工作城市范围包括
  • sqlserver最大数据量
  • 一般纳税人销售自己使用过的物品
  • 红冲更正的正确分录
  • 本年利润总额是什么
  • 其他应付款的会计编码
  • 收入费用表本期盈余与资产负债表不一致
  • 一般纳税人增值税怎么算
  • 有哪些企业项目
  • 契税退税政策怎么操作
  • 如果收到现金做账了还叫坐支
  • 员工工资怎么入账
  • 员工工资怎么计提
  • 兼职员工对公司的好处
  • 预提短期借款利息的会计科目
  • 以前年度应交税费多计提怎么调平
  • 税盘减免会计分录
  • 向非关联企业捐赠现金能不能抵扣
  • 流量对比
  • 开业建账到年末怎么做账
  • sql储存过程
  • win10预览版21390
  • 关闭windowsxp窗口的方法有
  • dllhost应用程序异常
  • xp桌面图标设置
  • winxp如何设置自动关机
  • win8系统怎么重新安装系统
  • linux7.2 sudo权限配置
  • windows7日文版改中文
  • window10 不能上网
  • Win7安全模式怎么切换到正常模式
  • python中list的用法例子
  • easyui框架的优缺点
  • js如何使用
  • shell python
  • 税务局每月征期是什么时候
  • 国家税务总局,河北省税务局
  • 税务清单模板
  • 杭州市税务局总局地址
  • 志愿者补贴如何领取
  • 广东省电子税务局电话
  • 土地增值税清算管理规程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设