之前写的东西当页码超过一定数额之后,浏览器会未响应,重写了代码,并且添加跳转功能
- <html>
- <head>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- <style>
- .global-page div {
- float: left;
- margin-left: 4px;
- }
- .global-page {
- width: 80%;
- margin: 0 auto;
- }
- .bottomPage div {
- min-width: 20px;
- padding: 0 2px;
- }
- .pageNum {
- margin: 0 3px 0 3px;
- text-align: center;
- color: #fff;
- display: block;
- float: left;
- cursor: pointer;
- border-radius: 3px;
- background: #1f4358;
- border: 1px solid #c6dcef;
- }
- .pageNum:hover {
- border: 1px solid #23beef;
- }
- .Pageactive {
- background: #23beef;
- }
- .bottomPage {
- height: 22px;
- line-height: 22px;
- }
- .bottomPage div {
- cursor: pointer;
- }
- .numPage {
- width: auto!important;
- }
- </style>
- <body>
- <div class="global-page">
- <div class="bottomPage" id="bottomPage" style="display: block;">
- <div class="firstPage" style="display: block;">
- <div>◀</div>
- </div>
- <div class="beforePage" style="display: block;">
- <div>
- <</div>
- </div>
- <div class="numPage">
- <div class="pageNum Pageactive" style="display: block;">1</div>
- <div class="pageNum" style="display: block;">2</div>
- <div class="pageNum" style="display: block;">3</div>
- <div class="pageNum" style="display: block;">4</div>
- <div class="pageNum" style="display: block;">5</div>
- <div class="pageNum" style="display: block;">6</div>
- <div class="pageNum" style="display: block;">7</div>
- <div class="pageNum" style="display: block;">8</div>
- <div class="pageNum" style="display: block;">9</div>
- <div class="pageNum" style="display: none;">10</div>
- <div class="pageNum" style="display: none;">11</div>
- <div class="pageNum" style="display: none;">12</div>
- </div>
- <div class="nextPage" style="display: block;">
- <div>></div>
- </div>
- <div class="lastPage" style="display: block;">
- <div>▶</div>
- </div>
- </div>
- </div>
- <div class="gotoPage"><input style="float:left" type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
- <div onclick="goto()" style="float:left">跳转</div>
- </div>
- </body>
- <script>
- var nowpage = 0;
- var lastPage = 1111; //最大页码
- var MaxPage = 9;//可现实的最大页码
- var thisPage = 0;
- function clearClass() {
- for (i = nowpage - 4; i <= nowpage + 4; i++) {
- $(".pageNum").eq(i)[0].style.display = "none"
- }
- }
- function goto() { //跳转
- var gotoPage = Number($("#kw").val());
- if (gotoPage) { //判断非空
- var gotoIndex = gotoPage - 1
- if (gotoIndex < 0 || gotoIndex >= lastPage) { //判断超出范围
- alert("mistake")
- return false;
- }
- else {
- if (lastPage <= MaxPage) { //判断总页码小于最大页
- nowpage = gotoIndex - 1;
- $(".pageNum").eq(gotoIndex).click();
- }
- else {
- if (gotoIndex - 4 < 0) {
- nowpage = gotoIndex - 1;
- for (k = 0; k < $(".pageNum").index(); k++) {
- $(".pageNum").eq(k)[0].remove()
- }
- var html = ""
- for (c = 0; c < MaxPage; c++) {
- if (c == 0) {
- html += ' <div class="pageNum Pageactive" style="display: block;">' + (c + 1) + '</div>'
- }
- else {
- html += ' <div class="pageNum" style="display: block;">' + (c + 1) + '</div>'
- }
- }
- $(".numPage").html(html)
- click()
- $(".pageNum").eq(gotoIndex).click();
- }
- else if (gotoIndex + 4 > lastPage && gotoIndex < lastPage) { //判断当前页在+-4之后是否超出范围
- nowpage = gotoIndex - 1;
- for (k = 0; k < $(".pageNum").index(); k++) {
- $(".pageNum").eq(k)[0].remove()
- }
- var html = ""
- for (c = lastPage - MaxPage ; c < lastPage; c++) {
- html += ' <div class="pageNum" style="display: block;">' + (c + 1) + '</div>'
- }
- $(".numPage").html(html)
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- click()
- $(".pageNum").eq(MaxPage-lastPage+gotoIndex).click();
- }
- else if (MaxPage <= gotoIndex <= lastPage - MaxPage) {
- nowpage = gotoIndex - 1;
- for (k = 0; k < $(".pageNum").index(); k++) {
- $(".pageNum").eq(k)[0].remove()
- }
- var html = ""
- for (c = gotoIndex - 4 ; c <= gotoIndex + 4; c++) {
- html += ' <div class="pageNum" style="display: block;">' + (c + 1) + '</div>'
- }
- $(".numPage").html(html)
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- click()
- $(".pageNum").eq(MaxPage-lastPage+gotoIndex-1).click();
- $(".pageNum").eq(4).click();
- }
- }
- }
- }
- else {
- return false;
- }
- }
- //页码初始化
- var pageListNumHtml = "";
- for (n = 0; n < MaxPage; n++) {
- pageListNumHtml += ' <div class="pageNum " style="display: block;">' + (n + 1) + '</div>'
- }
- $(".numPage").html(pageListNumHtml)
- function click() {
- $(".pageNum").click(function () {
- nowpage = $(this)[0].textContent - 1;//页码
- thisPage = $(this).index();
- $(".pageNum").removeClass("Pageactive")
- $(this).addClass("Pageactive")
- console.log(1)
- left_changePage(nowpage, thisPage)
- })
- }
- click()
- $(".pageNum").eq(0).click();
- $(".firstPage").click(function () {
- nowpage = 0;
- thisPage = 0;
- left_changePage(nowpage, thisPage)
- })
- $(".beforePage").click(function () {
- if (nowpage >= 1) {
- nowpage = nowpage - 1;
- thisPage = thisPage - 1;
- left_changePage(nowpage, thisPage)
- }
- else {
- alert("已经是第一页了")
- }
- })
- $(".nextPage").click(function () {
- if (nowpage >= lastPage - 1) {
- alert("已经是最后一页了")
- }
- else {
- thisPage = thisPage + 1;
- nowpage = nowpage + 1;
- left_changePage(nowpage, thisPage)
- }
- })
- $(".lastPage").click(function () {
- nowpage = lastPage - 1;
- if (lastPage < MaxPage) {
- thisPage = nowpage
- }
- else {
- thisPage = thisPage - 1;
- }
- left_changePage(nowpage, thisPage)
- })
- function left_changePage(i, k) {
- if (MaxPage > lastPage) {
- $(".pageNum").removeClass("Pageactive")
- $(".pageNum").eq(i).addClass("Pageactive")
- }
- else {
- if (i + 1 <= lastPage - 1 && i - 1 >= 0) {
- if (k == 0) {
- $(".pageNum").eq(MaxPage - 1).remove();
- $(".numPage").prepend('<div class="pageNum" style="display: block;">' + (i) + '</div>')
- $(".pageNum").removeClass("Pageactive")
- $(".pageNum").eq(0).click(function () {
- nowpage = $(this)[0].textContent - 1;//页码
- thisPage = $(this).index();
- $(".pageNum").removeClass("Pageactive")
- $(this).addClass("Pageactive")
- left_changePage(nowpage, thisPage)
- })
- thisPage = thisPage + 1
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- }
- else if (k == 8) {
- $(".pageNum").eq(0).remove();
- $(".numPage").append('<div class="pageNum" style="display: block;">' + (i + 2) + '</div>')
- $(".pageNum").removeClass("Pageactive")
- $(".pageNum").eq(8).click(function () {
- nowpage = $(this)[0].textContent - 1;//页码
- thisPage = $(this).index();
- $(".pageNum").removeClass("Pageactive")
- $(this).addClass("Pageactive")
- left_changePage(nowpage, thisPage)
- })
- thisPage = MaxPage - 2
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- }
- else{
- $(".pageNum").removeClass("Pageactive")
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- }
- }
- else if (i == lastPage - 1) {
- thisPage = MaxPage - 1
- for (k = 0; k < $(".pageNum").index(); k++) {
- $(".pageNum").eq(k)[0].remove()
- }
- var html = ""
- for (c = i - MaxPage + 1; c <= i; c++) {
- html += ' <div class="pageNum" style="display: block;">' + (c + 1) + '</div>'
- }
- $(".numPage").html(html)
- $(".pageNum").eq(thisPage).addClass("Pageactive")
- click()
- }
- else if (i == 0) {
- thisPage = i;
- for (k = 0; k < $(".pageNum").index(); k++) {
- $(".pageNum").eq(k)[0].remove()
- }
- var html = ""
- for (c = i; c < MaxPage; c++) {
- if (c == 0) {
- html += ' <div class="pageNum Pageactive" style="display: block;">' + (c + 1) + '</div>'
- }
- else {
- html += ' <div class="pageNum" style="display: block;">' + (c + 1) + '</div>'
- }
- }
- $(".numPage").html(html)
- click()
- }
- else {
- $(".pageNum").removeClass("Pageactive")
- $(".pageNum").eq(i).addClass("Pageactive")
- }
- }
- }
- </script>
- </html>
来源: http://www.qdfuns.com/notes/48250/902a909361d99343a442587e2072ded2.html