这周的总结

之前的总结：对于这次考核，对于自己来说还是可以的，但是做的页面还是不太好，有一些瑕疵，也是通过这次的考核，我也认识到了js的重要，学长学姐问的一些问题，自己对于这些的答案比较模糊，自己之前也只是大概的看了看，动手实践的也是很少，以至于自己也是没有回答上来，然后紧接着就要进行下一轮的学习和考核，也是开学前最后一次的学习和考核，然后要改掉过年赖床上的习惯了。

下周的计划：对于js’的学习还不是很好，也要继续对js进行深度的学习，然后也是要跟上学习的进度，自己也要多多的去敲一敲代码，让自己更理解和了解它们的含义，也要尽量的早一些完成页面，然后再进行总的回顾和复习，过年期间也是好久没有自己动手写一写算法了，从下周开始，算法自己也要开始写，算法的比赛的时间也定了，离比赛也越来越近了，自己也是希望通过努力可以取得好的成绩。

也是再有个几天就要开学了，不能让自己的燥起来，要冷静下来，好好的学习。.active:hover{color:#fff;background-color:#C8261C;border-color:#C8261C;}#btnPrev{width:60px}#btnNext{width:60px}”
document.getElementsByTagName(‘head’).item(0).appendChild(style);

/*
 需要一个<ul id="pagination"></ul>标签
 pages; // 总页数
 pageSize; // 一页显示数量
 pageIndex; // 当前页
 all_size;//是所有数据
 name; // 要渲染的函数
*/
let totalPage = pages;  // 总页数
function initPagination() {
    let pagination = document.querySelector('#pagination');
    let pageHtml;  // 按钮内容
    let prevButton = `<li class='list-items' id='btnPrev'>上一页</li>` // 向左
    let nextButton = `<li class='list-items' id='btnNext'>下一页</li>`// 向右
    let firstPage = `<li class='list-items' pagenumber=1>1</li>`// 第一页
    let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>` // 最后一页
    let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>` // 省略号
    let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>` // 省略号
    let pageTips = `<div style='line-height:38px;display:inline-block;' id='pageTips'>共${all_size}条</div > `;
    let pageInputs = `<div style="display:inline-block;margin-left: 20px;"><span style="display:inline-block;vertical-align: 4px;">跳转到</span><input type="text" class="page-input" value="${pageIndex}"><span style="display:inline-block;vertical-align: 4px;">页</span></div>`
    let pageButton = `<button class="page-button">确定</button>`;
    pageHtml = pageTips; // 添加向左的按钮

    pageHtml += prevButton;
    /* 生成页数 */
    if (totalPage <= 5) {  // 总页数小于等于5页全部显示
        for (let i = 1; i <= totalPage; i++) {
            pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
        }
    } else if (pageIndex <= 3) { //总页数大于5且当前页远离总页数
        for (let i = 1; i <= 5; i++) {
            pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
        }
        pageHtml += rightOmitPage;
        pageHtml += lastPage;
    } else if (pageIndex > totalPage - 5) { //总页数大于5且当前页接近总页数
        pageHtml += firstPage;
        pageHtml += leftOmitPage;
        for (let i = totalPage-5 ; i <= totalPage; i++) {
            pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
        }
    } else { //除开上面两个情况 当前页在中间
        pageHtml += firstPage;
        pageHtml += leftOmitPage;
        for (let i = pageIndex - 2; i <= pageIndex + 2; i++) {
            pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
        }
        pageHtml += rightOmitPage;
        pageHtml += lastPage;
    }
    pageHtml += nextButton; // 添加向右的按钮
    pageHtml += pageInputs; // 添加跳转页面的输入框
    pageHtml += pageButton; // 确定跳转的按钮
    pagination.innerHTML = pageHtml;
    document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');

    let pagenumberBtns = document.querySelectorAll("li[pagenumber]"); // 获取所有的页码按钮

    /* 点击页码按钮进行翻页 */
    pagenumberBtns.forEach(function (elements) {
        elements.onclick = function () {
            pageIndex = Number(this.innerHTML); // 当前页
            document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');
            pageHtml.innerHTML = '';
            name(pageIndex,pageSize);
            initPagination();
        }
    })

    /* 向左翻页 */
    document.getElementById('btnPrev').addEventListener("click", function () {
        if (pageIndex > 1) {
            pageIndex--;
            pageHtml.innerHTML = '';
            name(pageIndex,pageSize);
            initPagination();
        }
    })

    /* 向右翻页 */
    document.getElementById('btnNext').addEventListener("click", function () {
        if (pageIndex < totalPage) {
            pageIndex++;
            pageHtml.innerHTML = '';
            name(pageIndex,pageSize);
            initPagination();
        }
    })

    /* 向左快速翻页 */
    let btnGoLeft = document.getElementById('btnGoLeft');
    if (btnGoLeft) {
        btnGoLeft.addEventListener('mouseenter', function () {
            this.innerHTML = '&lt;'
        })
        btnGoLeft.addEventListener('mouseleave', function () {
            this.innerHTML = '...'
        })
        btnGoLeft.addEventListener("click", function () {
            if (pageIndex > 10) {
                pageIndex -= 10;
                pageHtml.innerHTML = '';
                name(pageIndex,pageSize);
                initPagination();
            }
        })
    }

    /* 向右快速翻页 */
    let btnGoRight = document.getElementById('btnGoRight')
    if (btnGoRight) {
        btnGoRight.addEventListener('mouseenter', function () {
            this.innerHTML = '&gt;'
        })
        btnGoRight.addEventListener('mouseleave', function () {
            this.innerHTML = '...'
        })
        btnGoRight.addEventListener("click", function () {
            if (pageIndex < totalPage - 5) {
                pageIndex += 5;
                pageHtml.innerHTML = '';
                name(pageIndex,pageSize);
                initPagination();
            }
        })
    }


    let pageInputes = document.getElementsByClassName('page-input');
    pageInputes[0].addEventListener('input',function(){
        // this.value = pageIndex;
        this.value=this.value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1');
        if (this.value / 1 > pages) {
            this.value = this.value + "";
            this.value = this.value.slice(0, this.value.length - 1);
        }
    })

    let button = document.getElementsByClassName('page-button');
    button[0].onclick = function(){
        pageIndex = button[0].value;
        // document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');
        pageHtml.innerHTML = '';
        name(pageIndex,pageSize);
        initPagination();
    }


    // document.querySelector("li[pagenumber='" + pageIndex + "']").classList.add('active');

}
initPagination();

}


页面呈现：

![](https://img-blog.csdnimg.cn/1a6cb1c8b56342de990d54f08980dc77.png)

 样式可以根据自己喜好进行修改。

文章作者: Mr. Fortunate

文章链接: https://www.fortunate.cool/2022/02/13/%E8%BF%99%E5%91%A8%E7%9A%84%E6%80%BB%E7%BB%93/

javascript 前端 html