{"html":"<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"UTF-8\">\n    <style>\n        .demo {\n            margin-bottom: 20px;\n            border: 1px solid #ebedf0;\n            border-radius: 2px;\n            padding: 10px;\n        }\n\n        .demo div {\n            margin-bottom: 10px;\n            font-size: 14px;\n        }\n\n        .pagination {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            line-height: 1.5;\n            list-style: none;\n            display: inline-block;\n        }\n\n        .pagination.hide {\n            display: none;\n        }\n\n        .pagination li {\n            position: relative;\n            display: inline-block;\n            float: left;\n            height: 32px;\n            margin: 0;\n            padding: 0 15px;\n            line-height: 30px;\n            background: #fff;\n            border: 1px solid #d9d9d9;\n            border-top-width: 1.02px;\n            border-left: 0;\n            cursor: pointer;\n            transition: color 0.3s, border-color 0.3s;\n        }\n\n        .pagination li:first-child {\n            border-left: 1px solid #d9d9d9;\n            border-radius: 4px 0 0 4px;\n        }\n\n        .pagination li:last-child {\n            border-radius: 0 4px 4px 0;\n        }\n\n        .pagination li:first-child {\n            box-shadow: none !important;\n        }\n\n        .pagination li.current {\n            border-color: #1890ff;\n            color: #1890ff;\n            border-left: 1px solid #1890ff;\n        }\n\n        .pagination li.current:not(:first-child) {\n            margin-left: -1px;\n        }\n    </style>\n</head>\n\n<body>\n    <div>\n        <div id=\"jsContainer\">\n            <ul class=\"pagination\">\n                <li>首页</li>\n                <li>8</li>\n                <li>9</li>\n                <li class=\"current\">10</li>\n                <li>11</li>\n                <li>12</li>\n                <li>末页</li>\n            </ul>\n        </div>\n\n        <div class=\"demo\">\n            <div>(Demo1) total: 10，current: 4</div>\n            <ul class=\"pagination\">\n                <li>首页</li>\n                <li>2</li>\n                <li>3</li>\n                <li class=\"current\">4</li>\n                <li>5</li>\n                <li>6</li>\n                <li>末页</li>\n            </ul>\n        </div>\n\n        <div class=\"demo\">\n            <div>(Demo2) total: 0，current: 0</div>\n            <ul class=\"pagination hide\"></ul>\n        </div>\n\n        <div class=\"demo\">\n            <div>(Demo3) total: 3，current: 2</div>\n            <ul class=\"pagination\">\n                <li>1</li>\n                <li class=\"current\">2</li>\n                <li>3</li>\n            </ul>\n        </div>\n\n        <div class=\"demo\">\n            <div>(Demo4) total: 10，current: 2</div>\n            <ul class=\"pagination\">\n                <li>1</li>\n                <li class=\"current\">2</li>\n                <li>3</li>\n                <li>4</li>\n                <li>5</li>\n                <li>末页</li>\n            </ul>\n        </div>\n\n        <div class=\"demo\">\n            <div>(Demo5) total: 10，current: 9</div>\n            <ul class=\"pagination\">\n                <li>首页</li>\n                <li>6</li>\n                <li>7</li>\n                <li>8</li>\n                <li class=\"current\">9</li>\n                <li>10</li>\n            </ul>\n        </div>\n    </div>\n    <script type=\"text/javascript\">\n              function Pagination(container, total, current) {\n        this.total = total\n        this.current = current\n        this.html = html\n        this.val = val\n        this.el = document.createElement('ul') //TODO: 创建分页组件根节点\n        if (!this.el) return\n\n        this.el.innerHTML = this.html()\n        container.appendChild(this.el)\n        if (this.total <= 1) this.el.classList = 'hide' //TODO: 判断是否需要隐藏当前元素\n\n        // 主要内容\n        function html() {\n          let str = ''\n          if (this.total <= 1) return ''\n          if (this.total <= 5) {\n            for (let i = 1; i <= this.total; i++) {\n              str += `\n                    <li class='${this.current === i ? 'current' : ''}'>${i}</li>\n                `\n            }\n          } else {\n            let start = this.current > this.total - 2 ? this.total - 4 : this.current - 2 > 0 ? this.current - 2 : 1\n            let end = this.current + 2 < this.total ? (this.current + 2 > 5 ? this.current + 2 : 5) : this.total\n            if (start > 1) {\n              str += `\n              <li>首页</li>\n              `\n            }\n            for (let i = start; i <= end; i++) {\n              str += `<li class='${this.current === i ? 'current' : ''}'>${i}</li>`\n            }\n            if (end < this.total) {\n              str += `\n              <li>末页</li>\n              `\n            }\n          }\n          // console.log(str);\n          //TODO: 生成组件的内部html字符串\n          return str\n        }\n\n        // 设置当前页\n        function val(current) {\n          if (arguments.length === 0) return this.current\n          if (current < 1 || current > this.total || current === this.current) return\n          this.current = current\n          this.el.innerHTML = this.html()\n        }\n      }\n    </script>\n</body>\n\n</html>","css":"","js":""}