FED90. 分页
描述
本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。HTML/CSS/JavaScript 解法, 执行用时: 986ms, 内存消耗: 77944KB, 提交时间: 2021-06-25
{"css":".demo{\n margin-bottom: 20px;\n border: 1px solid #ebedf0;\n border-radius: 2px;\n padding: 10px;\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.pagination.hide{\n display: none;\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.pagination li:first-child{\n border-left: 1px solid #d9d9d9;\n border-radius: 4px 0 0 4px;\n}\n.pagination li:last-child{\n border-radius: 0 4px 4px 0;\n}\n.pagination li:first-child{\n box-shadow: none !important;\n}\n.pagination li.current{\n border-color: #1890ff;\n color: #1890ff;\n border-left: 1px solid #1890ff;\n}\n.pagination li.current:not(:first-child) {\n margin-left: -1px;\n}","js":"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 this.el.className = 'pagination'\n if (!this.el) return;\n\n this.el.innerHTML = this.html();\n if(!this.el.innerHTML){\n this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素\n }\n container.appendChild(this.el);\n\n function html() {\n var str = ''\n if (this.total <= 1) return '';\n \n //TODO: 生成组件的内部html字符串\n if(this.total<=5){//小于5页\n for(let i = 1;i <= this.total;i++){\n str+=i==this.current?`<li class=\"current\">${this.current}</li>`:`<li>${i}</li>`\n }\n }else{//大于5页\n if(this.current<=3){\n for(let i = 1;i <= 5;i++){//最多显示5页\n str+=i==this.current?`<li class=\"current\">${this.current}</li>`:`<li>${i}</li>`\n }\n str+='<li>末页</li>'\n }\n if(this.current>3&&this.current<this.total-2){\n str+='<li>首页</li>'\n for(let i = current-2;i <= current+2;i++){\n str+=i==this.current?`<li class=\"current\">${this.current}</li>`:`<li>${i}</li>`\n }\n str+='<li>末页</li>'\n }\n if(this.current>=this.total-2){\n str+='<li>首页</li>'\n for(let i = this.total-4;i <= this.total;i++){\n str+=i==this.current?`<li class=\"current\">${this.current}</li>`:`<li>${i}</li>`\n }\n }\n }\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 }","html":"<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>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 992ms, 内存消耗: 77932KB, 提交时间: 2021-07-09
{"css":".demo{\n margin-bottom: 20px;\n border: 1px solid #ebedf0;\n border-radius: 2px;\n padding: 10px;\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.pagination.hide{\n display: none;\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.pagination li:first-child{\n border-left: 1px solid #d9d9d9;\n border-radius: 4px 0 0 4px;\n}\n.pagination li:last-child{\n border-radius: 0 4px 4px 0;\n}\n.pagination li:first-child{\n box-shadow: none !important;\n}\n.pagination li.current{\n border-color: #1890ff;\n color: #1890ff;\n border-left: 1px solid #1890ff;\n}\n.pagination li.current:not(:first-child) {\n margin-left: -1px;\n}","js":"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.querySelector('.pagination'); //TODO: 创建分页组件根节点\n if (!this.el) return;\n\n this.el.innerHTML = this.html();\n container.appendChild(this.el);\n //返回高亮的结果\n if (this.total <= 1) {\n this.el.className = 'hide'; //TODO: 判断是否需要隐藏当前元素\n }\n\n\n function html() {\n //1.如果总页数小于等于1，不需要填充字符串\n if (this.total <= 1) return '';\n\n //TODO: 生成组件的内部html字符串\n var inHtml = '';\n //2.如果总页数在2-5页，只需显示页数，不用显示首页和末页\n if (this.total <= 5) {\n //范围会在1 ~ this.total\n for (var i = 1; i <= this.total; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n } else {\n //3.如果总页数在6页以上\n /*** 3.1 高亮页小于等于5 ***/\n if (this.current <= 5) {\n /*** 3.1.1 高亮页+2 <= 5,不需要换页 ***/\n //此种情况不会出现首页\n if (this.current + 2 <= 5) {\n //范围会在1 ~ 5\n for (var i = 1; i <= 5; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n\n } else {\n /*** 3.1.2 高亮页+2 > 5,需要换页 ***/\n //此种情况需要首页\n inHtml += '<li>首页</li>'\n //保持高亮页前后各有2页\n for (var i = this.current - 2; i <= this.current + 2; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n }\n //最后加上末页\n inHtml += '<li>末页</li>'\n } else {\n /** 3.2 高亮页大于5 ***/\n /*** 3.2.1 高亮页满足前后都各有两页 ***/\n //此种情况肯定会有首页\n inHtml += '<li>首页</li>'\n //保持高亮页前后各有2页\n if (this.current + 2 <= this.total) {\n for (var i = this.current - 2; i <= this.current + 2; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n } else {\n /*** 3.2.2 高亮页不满足前后都各有两页 ***/\n //范围在 (this.total - 4) ~ this.total\n // 因为this.current + 2 > this.total,要么高亮页是末页，要么高亮页后一页是末页，而首页与末页相差4\n for (var i = this.total - 4; i <= this.total; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n }\n //判断是否需要加上末页\n if (this.current+2 < this.total) {\n inHtml += '<li>末页</li>'\n }\n\n }\n\n }\n return inHtml;\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}","html":"<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>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1016ms, 内存消耗: 77864KB, 提交时间: 2021-06-09
{"css":".demo{\n margin-bottom: 20px;\n border: 1px solid #ebedf0;\n border-radius: 2px;\n padding: 10px;\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.pagination.hide{\n display: none;\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.pagination li:first-child{\n border-left: 1px solid #d9d9d9;\n border-radius: 4px 0 0 4px;\n}\n.pagination li:last-child{\n border-radius: 0 4px 4px 0;\n}\n.pagination li:first-child{\n box-shadow: none !important;\n}\n.pagination li.current{\n border-color: #1890ff;\n color: #1890ff;\n border-left: 1px solid #1890ff;\n}\n.pagination li.current:not(:first-child) {\n margin-left: -1px;\n}","js":"function Pagination(container, total, current) {\n this.total = total;\n this.current = current-1;\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 this.el.className = total>1 ? 'pagination' : 'pagination hide'; //TODO: 判断是否需要隐藏当前元素\n\n function html() {\n if (this.total <= 1) return '';\n\n //TODO: 生成组件的内部html字符串\n if(!((this.total>1) && (this.current<=this.total))) return '';\n let returnItem = '', startNum = 0, endNum = this.total;\n if(this.current < 3) {\n endNum = 5;\n } else if(this.current > this.total-3) {\n returnItem = '<li>首页</li>';\n startNum = this.total-5;\n } else {\n returnItem = '<li>首页</li>';\n endNum = this.current + 3;\n startNum = this.current -2;\n }\n for(let i=startNum; i<endNum; i++) {\n returnItem += `<li class=\"${this.current==i ? 'current' : ''}\">${i+1}</li>`;\n }\n if(!(this.current+1 > this.total-3)) {\n returnItem += `<li>末页</li>`;\n }\n\n return returnItem;\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}","html":"<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>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1025ms, 内存消耗: 77884KB, 提交时间: 2021-06-25
{"css":".demo{\n margin-bottom: 20px;\n border: 1px solid #ebedf0;\n border-radius: 2px;\n padding: 10px;\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.pagination.hide{\n display: none;\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.pagination li:first-child{\n border-left: 1px solid #d9d9d9;\n border-radius: 4px 0 0 4px;\n}\n.pagination li:last-child{\n border-radius: 0 4px 4px 0;\n}\n.pagination li:first-child{\n box-shadow: none !important;\n}\n.pagination li.current{\n border-color: #1890ff;\n color: #1890ff;\n border-left: 1px solid #1890ff;\n}\n.pagination li.current:not(:first-child) {\n margin-left: -1px;\n}","js":"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.querySelector('.pagination'); //TODO: 创建分页组件根节点\n if (!this.el) return;\n\n this.el.innerHTML = this.html();\n container.appendChild(this.el);\n //返回高亮的结果\n this.val();\n if (this.total <= 1) {\n this.el.className = 'hide'; //TODO: 判断是否需要隐藏当前元素\n }\n\n\n function html() {\n //1.如果总页数小于等于1，不需要填充字符串\n if (this.total <= 1) return '';\n\n //TODO: 生成组件的内部html字符串\n var inHtml = '';\n //2.如果总页数在2-5页，只需显示页数，不用显示首页和末页\n if (this.total <= 5) {\n //范围会在1 ~ this.total\n for (var i = 1; i <= this.total; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n } else {\n //3.如果总页数在6页以上\n /*** 3.1 高亮页小于等于5 ***/\n if (this.current <= 5) {\n /*** 3.1.1 高亮页+2 <= 5,不需要换页 ***/\n //此种情况不会出现首页\n if (this.current + 2 <= 5) {\n //范围会在1 ~ 5\n for (var i = 1; i <= 5; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n\n } else {\n /*** 3.1.2 高亮页+2 > 5,需要换页 ***/\n //此种情况需要首页\n inHtml += '<li>首页</li>'\n //保持高亮页前后各有2页\n for (var i = this.current - 2; i <= this.current + 2; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n }\n //最后加上末页\n inHtml += '<li>末页</li>'\n } else {\n /** 3.2 高亮页大于5 ***/\n /*** 3.2.1 高亮页满足前后都各有两页 ***/\n //此种情况肯定会有首页\n inHtml += '<li>首页</li>'\n //保持高亮页前后各有2页\n if (this.current + 2 <= this.total) {\n for (var i = this.current - 2; i <= this.current + 2; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n } else {\n /*** 3.2.2 高亮页不满足前后都各有两页 ***/\n //范围在 (this.total - 4) ~ this.total\n // 因为this.current + 2 > this.total,要么高亮页是末页，要么高亮页后一页是末页，而首页与末页相差4\n for (var i = this.total - 4; i <= this.total; i++) {\n if (i == this.current) {\n inHtml += '<li class=\"current\">' + i + '</li>'\n } else {\n inHtml += '<li>' + i + '</li>'\n }\n }\n }\n //判断是否需要加上末页\n if (this.current+2 < this.total) {\n inHtml += '<li>末页</li>'\n }\n\n }\n\n }\n return inHtml;\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}","html":"<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>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1061ms, 内存消耗: 77892KB, 提交时间: 2021-07-03
{"css":".demo{\n margin-bottom: 20px;\n border: 1px solid #ebedf0;\n border-radius: 2px;\n padding: 10px;\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.pagination.hide{\n display: none;\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.pagination li:first-child{\n border-left: 1px solid #d9d9d9;\n border-radius: 4px 0 0 4px;\n}\n.pagination li:last-child{\n border-radius: 0 4px 4px 0;\n}\n.pagination li:first-child{\n box-shadow: none !important;\n}\n.pagination li.current{\n border-color: #1890ff;\n color: #1890ff;\n border-left: 1px solid #1890ff;\n}\n.pagination li.current:not(:first-child) {\n margin-left: -1px;\n}","js":"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 this.el.className = total>1?'pagination':'pagination hide'; //TODO: 判断是否需要隐藏当前元素\n\n function html() {\n if (this.total <= 1) return '';\n \n //TODO: 生成组件的内部html字符串\n let start = current-2>0?current-2:1\n let end = current+2>total?total:current+2\n if(current<3){\n end=total>5?5:total\n }\n if(end-start<4) start = total-4>1?total-4:1\n \n let str=''\n if(start>1) str = '<li>首页</li>'\n for(let i=start; i<=end; i++){\n if(i===current) str+=`<li class=\"current\">${i}</li>`\n else str+=`<li>${i}</li>`\n }\n if(total>end) str += '<li>末页</li>'\n \n return str;\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\nconsole.log('lance')","html":"<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>","libs":[]}