【JavaScript】JS实用案例分享：动态生成分页组件 | 通过按键实现移动控制-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript】JS实用案例分享：动态生成分页组件 | 通过按键实现移动控制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSDN话题挑战赛第2期
参赛话题：学习笔记

🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）
🖥️ TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）
🧑‍💼 个人简介：大三学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，点击跳转🍬

前言

最近博主一直在牛客网刷题巩固基础知识，牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！

牛客网里的题库非常全面的，无论你是前端还是后端，是想要备考还是准备面试又或者是想要提高自己，你都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点我进入牛客网

牛客网	牛客网

本篇文章所有示例来自于牛客网题库/在线编程/JS篇，这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础！

1、动态生成分页组件

效果演示

【JavaScript】JS实用案例分享：动态生成分页组件 | 通过按键实现移动控制

有以下HTML和CSS：

HTML结构

<div>
    <!-- 存放JS动态生成组件容器：节点A -->
    <div id="jsContainer">
        <div>生成分页组件：</div>
    </div>
    <hr>
    <!-- 以下是演示demo -->
    <div class="demo">
        <div>(Demo1) total: 10，current: 4</div>
        <ul class="pagination">
            <li>首页</li>
            <li>2</li>
            <li>3</li>
            <li class="current">4</li>
            <li>5</li>
            <li>6</li>
            <li>末页</li>
        </ul>
    </div>

    <div class="demo">
        <div>(Demo2) total: 0，current: 0</div>
        <ul class="pagination hide"></ul>
    </div>

    <div class="demo">
        <div>(Demo3) total: 3，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
        </ul>
    </div>

    <div class="demo">
        <div>(Demo4) total: 10，current: 2</div>
        <ul class="pagination">
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>末页</li>
        </ul>
    </div>

    <div class="demo">
        <div>(Demo5) total: 10，current: 9</div>
        <ul class="pagination">
            <li>首页</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li class="current">9</li>
            <li>10</li>
        </ul>
    </div>
</div>

CSS样式

.demo {
   margin-bottom: 20px;
   border: 1px solid #ebedf0;
   border-radius: 2px;
   padding: 10px;
}

.demo div {
   margin-bottom: 10px;
   font-size: 14px;
}

.pagination {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-size: 14px;
   line-height: 1.5;
   list-style: none;
   display: inline-block;
}

.pagination.hide {
   display: none;
}

.pagination li {
   position: relative;
   display: inline-block;
   float: left;
   height: 32px;
   margin: 0;
   padding: 0 15px;
   line-height: 30px;
   background: #fff;
   border: 1px solid #d9d9d9;
   border-top-width: 1.02px;
   border-left: 0;
   cursor: pointer;
   transition: color 0.3s, border-color 0.3s;
}

.pagination li:first-child {
   border-left: 1px solid #d9d9d9;
   border-radius: 4px 0 0 4px;
}

.pagination li:last-child {
   border-radius: 0 4px 4px 0;
}

.pagination li:first-child {
   box-shadow: none !important;
}

.pagination li.current {
   border-color: #1890ff;
   color: #1890ff;
   border-left: 1px solid #1890ff;
}

.pagination li.current:not(:first-child) {
   margin-left: -1px;
}

案例需求

界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，按照如下要求补充完成Pagination函数。

最多连续显示5页，居中高亮显示current页（如demo1所示)：
total <= 1 时，隐藏该组件（如demo2所示）：
如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）：
当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)：
total、current均为正整数，1 <= current <= total
上面效果演示是 new Pagination(document.getElementById('jsContainer'), 16, 9) 执行后的结果

JavaScript实现

function Pagination(container, total, current) {
    this.total = total;
    this.current = current;
    this.html = html;
    this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
    this.el.className = 'pagination'
    if (!this.el) return;

    this.el.innerHTML = this.html();
    container.appendChild(this.el);

    // 分页组件根节点内容为空时，添加hide类名隐藏
    if (!this.el.innerHTML) {
        this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素

    }

    function html() {
        if (this.total <= 1) return '';
        let str = ''
        //TODO: 生成组件的内部html字符串
        if (this.total <= 5) {
            for (let i = 1; i <= this.total; i++) {
                str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
            }
        } else {
            if (this.current <= 3) {
                for (let i = 1; i <= 5; i++) {
                    str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
                }
                str += '<li>末页</li>'
            }
            if (this.current > 3 && this.current < this.total - 2) {
                str += '<li>首页</li>'
                for (let i = this.current - 2; i <= this.current + 2; i++) {
                    str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
                }
                str += '<li>末页</li>'
            }
            if (this.current >= this.total - 2) {
                str += '<li>首页</li>'
                for (let i = this.total - 4; i <= this.total; i++) {
                    str += i == this.current ? `<li class="current">${this.current}</li>` : `<li>${i}</li>`
                }
            }
        }
        return str;
    }
}
// 测试
new Pagination(document.getElementById('jsContainer'), 16, 20)

这个案例中Pagination是一个构造函数，需要通过new操作符调用，需要注意的是Pagination内的方法（如html方法）需要先挂载到Pagination上（this.html = html）才能被Pagination中的其它成员访问（通过this访问this.html()）

知识点：

new 运算符与构造函数的使用。

2、通过按键实现移动控制