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

Posted 2022-10-03 卡卡西最近怎么样

源码获取方式：

数据滚动大屏源码，原生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)
•