ステーション全体で最もシンプルな「データスクロール可視化大画面」【JSの基本がすぐに使える】

ソースコードの入手方法:

データ スクロール大画面ソース コード、ネイティブ js 実装は非常にシンプルです - Javascript ドキュメント リソース - CSDN ダウンロードデータ スクロール大画面ネイティブ js によって実装されたケース、実装はネットワーク全体で最も簡単なはずです。直接使用するだけで、メンバーは不要です。その他のダウンロード リソースと学習教材については、CSDN ダウンロード チャネルにアクセスしてください。

---

メンバーを持っていない友達は、「データスクロール」で私と直接プライベートにチャットでき、個別にパッケージ化して送信できます（無料！）

---

ケースショー:

機能説明:

この場合の機能は自動データ スクロールであり、バックエンドでデータをリアルタイムで視覚化するために使用できます. カーソルを画面に移動するとスクロールが一時停止し、画面から離れるとスクロールが続行されます.

  

さらに、このデータ視覚化大画面ページは、バックエンド コードで使用して、データのリアルタイム視覚化を追加できます. 必要に応じて、この場合のデータ テーブルの td データ情報をホームページ リンクに置き換えることができますカーソルが上に移動した後、ユーザーのホームページ情報を表示し、スクロールを一時停止することができます. また、コード全体を大物のウェブサイトのページに直接コピーすると、予期しない位置ずれが発生する可能性があります. 、このケースは画面の中央に設定されているためです。

---

実装コード:

実装原則:

この場合の実装も非常に簡単です. スクロール効果であるため, setInterval タイマーが必須である必要があります. カーソルが上に置かれるとスクロールが一時停止し, カーソルが離されるとスクロールが継続するため, 2 つのタイマー設定が必要です. . タイマー. ここでは便宜上タイマーを別の関数にカプセル化し, タイマー内でこの関数を呼び出すことができます. さらに, マウスが上に移動した後にすべての動作中のタイマーをクリアする必要があります. これは解決するためにスピード積み上げの問題、クリアしないと上に移動するたびに1回加速してしまう。最後の注意点は、カーソルが移動するタイマーの名前はローカル変数を使用できないことです。そうしないと、タイマーのクリアが失敗します。

<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(コールバック関数、ミリ秒単位の遅延)

このタイマーのコールバック関数は、通過するたびに実行されることに注意してください。2 つの関数は、setTimeout と同じ方法で記述されます。

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

気をつけて：

• ウィンドウは省略可能
• 関数を直接書くか、関数名を書くことができます
• 時間はミリ秒単位で記述する必要があります
• ページには多くのタイマーがある場合があります。グリフを設定することをお勧めします。 var time1= window.setTimeout(fn,2000)
•