实现上一页和下一页的效果

一，简介：主要实现了当前页面数据三条进行上一页和下一页首页末页之间的切换

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 += `
                <li>${
      
      arr[i]}</li>
                `
            }
            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)
        }