全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】
2023-03-31 10:40:09 时间
源码获取方式:
没有会员的小伙伴直接私聊我“数据滚动”即可我可以给你单独打包发去(免费的!)
案例展示:
功能说明:
本案例功能为数据自动滚动,可搭配后端进行数据实时的可视化添加,光标移动到屏幕处可以暂停滚动,移开继续滚动
另外,本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用,如果有需要可以将本案例中数据的表格的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)
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假