前のページと次のページの効果を実現します.

11235 ワード

js。 javascript html

一つは、簡単な紹介です.現在のページデータ3つが前のページと次のページの最初のページと最後のページの間で切り替わることを実現しました.
1:定義データ

 //        
        var arr = ["aa", "bb",
            "cc", "dd",
            "ee", "ff",
            "gg", "hh",
            "ii", "jj"
        ]

2ページの属性を設定します.

        //    
        var page = 1;
        //    
        var limit = 3;

主な方法:ここでは主に配列のせん断方法が用いられている.

     var nowArr = arr.slice((page - 1) * limit, page * limit);

3,次のクリックイベントを行います.

  function next() {
     
            if (page < Math.ceil(arr.length / limit)) {
     
                page += 1;//         1
                var nowArr = arr.slice((page - 1) * limit, page * limit);
                show(nowArr);
            } else {
     
                alert("     ，      ")
            }
        }

4,次のクリックイベントを行います.

function prey() {
     
            if (page > 1) {
     
                page -= 1;//         1
                var nowArr = arr.slice((page - 1) * limit, page * limit);
                show(nowArr);
            } else {
     
                alert("       ")
            }
        }

5,レンダリング方法

 //    
        function show(arr) {
     
            var str = "";
            for (var i = 0; i < arr.length; i++) {
     
                str += `
                ${
       arr[i]}
                `
            }
            document.querySelector("#uls").innerHTML = str;

        }

6，首页的点击事件

 function first() {
     
            page = 1;//       
            var newArr = arr.slice((page - 1) * limit, page * limit);
            show(nowArr);
            alert("     ")
        }

7,最終ページのクリックイベント

 function last() {
     
            page = Math.ceil(arr.length / limit);//                     
            var nowArr = arr.slice((page - 1) * limit, page * limit);//     
            show(noewArr)
        }

浅析React Fiber