js分页效果

//html部分

<div class="goods-box">
            <div class="one">
                <img src="img/product1.jpg" alt="">
                <div class="goods-price">￥438.00</div>
                <div class="goods-text">
                    <a href="#">【坏果包赔】<span>猫山王榴莲</span>肉马来西亚进口带壳（D197）液氮冷冻水果 特惠装 中果</a>
                </div>
                <div class="goods-comment">
                    <span>1万+</span>条评价
                </div>
                <div class="goods-comment">
                    <a href="">猫山王榴莲旗舰店</a>
                </div>
                <div class="logistic" title="京东物流仓配，商家提供售后服务">
                    <i>京东物流</i>
                </div>
                <div class="last-shop">
                    <a href="#" class="contrast"><div class="squre"></div> <i> &nbsp;</i> 对比</a>
                    <a href="#" class="contrast ss"><span class="gz">&#xe610;</span><i>&nbsp;</i>关注</a>
                    <a href="#" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i>&nbsp;</i> 加入购物车</a>
                </div>
            </div>
        </div>
        <div class="cont-paging">
            <span class="page-change prev">上一页</span>
            <div class="paging"></div>
            <span class="page-change nex">下一页</span>
        </div>

//css部分

.goods-box {
    width: 1080px;
    height: 450px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #f9f9f9;
}
.one {
    float: left;
    width: 220px;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 40px;
}
.one::after {
    content: '';
    display: block;
    clear: both;
}
.goods-price {
    margin-top: 15px;
    color: #e4393c;
    font-size: 18px;
}
.goods-text {
    overflow: hidden;
    height: 50px;
    margin-top: 10px;
    color: #666;
    font-size: 12px;
    text-overflow: ellipsis;
}
.goods-text a {
    color: #666;
}
.goods-text span {
    color: #e4393c;
}
.goods-text a:hover {
    color: #e4393c;
}
.goods-comment {
    margin-top: 10px;
    color: #a7a7a7;
    font-size: 12px;
}
.goods-comment span {
    color: #646fb0;
}
.goods-comment a {
    color: #a7a7a7;
}
.logistic {
    height: 16px;
    margin-top: 10px;
}
.logistic i {
    padding: 0 3px;
    border: 1px solid #e23a3a;
    color: #e23a3a;
    font-size: 12px;
}
.last-shop {
    margin-top: 16px;
    margin-bottom: 0;
}
.last-shop::after {
    content: '';
    display: block;
    clear: both;
}
.contrast {
    float: left;
    position: relative;
    width: 58px;
    height: 25px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    color: #999;
    font-size: 12px;
    line-height: 25px;
}
.squre {
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    margin-left: 6px;
    border: 1px solid rgb(221, 221, 221);
}
.gz {
    margin-left: 6px;
    font-family: 'iconfont';
    font-size: 15px;
}
.ss {
    border-left: none;
}
.shop {
    width: 93px;
    border-left: none;
}
.shop img {
    margin-left: 3px;
    vertical-align: -5px;
}
.cont-paging {
    width: 1080px;
    height: 50px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
}
.cont-paging::after {
    content: '';
    display: block;
    clear: both;
}
.page-change {
    float: left;
    height: 20px;
    margin-top: 15px;
    margin-right: 20px;
    margin-left: 350px;
    background-color: rgb(162, 167, 228);
    color: rgb(56, 56, 56);
    line-height: 20px;
}

//js部分

let ww = [];
let res = '';
let shoppingcar = $('.shop-box');
let y=0;
let allgoods = $('.all-good');
//axios引入数据，需要说明的是引用axios需要用<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post("http://8.130.175.54:8003/getAllGoods")
.then(function (xlfy) {
    console.log(xlfy.data);
    res=xlfy.data;
    //获取元素,分页效果
    let div = $('.goods-box');
    let prev = $('.prev');
    let nex = $('.nex');
    let paging = $('.paging');
    let pagecount = Math.ceil(xlfy.data.length/4);
    let x=1;
    let info = [];
    //定义图片
    let pict = ['<img src="img/product10.jpg" alt="">',
        '<img src="img/product1.jpg" alt="">',
        '<img src="img/product2.jpg" alt="">',
        '<img src="img/product3.jpg" alt="">',
        '<img src="img/product4.jpg" alt="">',
        '<img src="img/product5.jpg" alt="">',
        '<img src="img/product6.jpg" alt="">',
        '<img src="img/product7.jpg" alt="">',
        '<img src="img/product8.jpg" alt="">',
        '<img src="img/product9.jpg" alt="">'
    ]
    //渲染函数，将数据插入
    let rend = ()=>{
        info = xlfy.data.slice((x-1)*4,4*x);
        div.innerHTML = '';
        info.forEach((item,index)=>{
            let one = document.createElement('div');
            one.classList.add('one');
            one.setAttribute('index',item.id);
            one.innerHTML += `${pict[index]}
            <div class="goods-price">￥${item.price}</div>
            <div class="goods-text">
                <a href="#">【${item.name}】${item.desc}</a>
            </div>
            <div class="goods-comment">
                <a href="">${item.merchant}</a>
            </div>
            <div class="logistic" title="京东物流仓配，商家提供售后服务">
                <i>京东物流</i>
            </div>
            <div class="last-shop">
                <a href="javascript:void(0)" class="contrast"><div class="squre"></div> <i> &nbsp;</i> 对比</a>
                <a href="javascript:void(0)" class="contrast ss"><span class="gz">&#xe610;</span><i>&nbsp;</i>关注</a>
                <a href="javascript:void(0)" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i>&nbsp;</i> 加入购物车</a>
            </div>`;
            div.appendChild(one);
        }) 
    }
    //调用渲染函数
    rend();
    //添加页数
    for(let i=1;i<=pagecount;i++){
        paging.innerHTML = paging.innerHTML+`<a>${i}</a>`+' ';
    }
    //添加页数输入框
    paging.innerHTML+=`<span class='skip'>跳转至<input type='text'></span>页`;
    //选择页数并给第一页添加默认的背景色
    let all = paging.querySelectorAll('a');
    all[x-1].classList.add('active');
    //选择页数，实现点击某页跳转到那一页
    all.forEach((item,index)=>{
        item.onclick = function(){
            div.innerHTML = '';
            for(let i=0;i<all.length;i++){
                all[i].classList.remove('active');
            }
            this.classList.add('active');
            x = index+1;
            rend();
        }
    })
    //input框按enter键实现跳转
    let skipinput = document.querySelector('.skip input');
    skipinput.onkeydown = function(e){
        if(e.keyCode==13&& skipinput.value !=''){
            for(let i=0;i<all.length;i++){
                all[i].classList.remove('active');
            }
            x = e.target.value;
            all[x-1].classList.add('active');
            div.innerHTML = '';
            rend();
        }
        if(x>=all.length||x<=0){
            return ;
        }
    }
    //点击上一页，下一页改变高亮
    let changepage = ()=>{
        for(let i=0;i<all.length;i++){
            all[i].classList.remove('active');
        }
        all[x-1].classList.add('active');
    }
    //上一页的点击效果
    prev.onclick = function(){
       
        if(x<=1){
           return;
        }else{
            div.innerHTML = '';
            x=x-1;
            changepage();
            rend();
        }
    }
    //下一页的点击效果
    nex.onclick = function(){
        if(x>=3){
            return ;
        }else{
            div.innerHTML='';
            x=x+1;
            changepage();
            rend();
        }
    }