js 实现页数切换

香山乐天

已于 2022-08-17 12:39:40 修改

阅读量473

点赞数

文章标签： javascript 开发语言

于 2022-07-18 13:35:39 首次发布

本文链接：https://blog.csdn.net/weixin_45486631/article/details/125847041

版权

请多指教
测试网址
刚生成页数菜单时先点上下一个在测试网址中会报错项目中不会不懂怎么回事
https://jsbin.com/pinovorahu/edit?html,css,output

	.overfloath {
        overflow: hidden;
    }
    .floatleft {
        float:left;
    }
    #yemenu {
        list-style-type: none;
    }
    #yemenu li {
        cursor: pointer;
        margin-right:40px;
    }
    .dianji {
        cursor: pointer;
    }
    .nowpageClass {  
      background-color: #6cf;
	  color: white;
	  width: 20px;
	  text-align: center;
    }
    #jump {
        margin-left: 16px;
    }
    #jump_count {
        height: 20px;
        width: 26px;
    }

<body>
  <input type="button" value="cs" onclick="yeshu()"/>
  <div class="floatleft" style=" padding-top: 5px;">
    <div class="floatleft">
      <label id="equipCount"></label>
    </div>
    <div class="floatleft">
      <label class="dianji" onclick="fenye()"><</label>
        </div>
      <div class="floatleft">
        <ul id="yemenu" class="overfloath"> </ul>
      </div>
      <div class="floatleft">
        <label class="dianji" onclick="fenye()">></label>
      </div> 
      <div class="floatleft">
        <label id="jump">前往</label>
        <input type="text" id="jump_count" value="1" />
        <label>页</label>
        <label class="dianji" onclick="fenye('jp')">></label>
      </div>
    </div>
</body>

<script>  
    /*分页*/
    var pageCount;//总条数
    //查询页数
    function yeshu() {   
    pageCount=11;
        pageCount = Math.ceil(pageCount);//有小数往前进一位
        var list = document.getElementById("yemenu"); 
        var xunhuan = pageCount;
        if (xunhuan > 5) xunhuan = 5;//一次显示五页
        for (var i = 1; i <= xunhuan; i++) {
            var li = document.createElement("li");
            li.innerHTML = i;   
            li.classList.add("floatleft");//这个是添加浮动样式
            if (i == 1) li.classList.add("nowpageClass");
            li.onclick = fenye;
            list.appendChild(li);
        } 
    }
    //改变页数
    function fenyeMenu(pages) {
        var xhPrive = Math.floor(pages) - 2; 
        var xhNext = Math.floor(pages) + 2;  
        var list = document.getElementById("yemenu");  
        for (var i = list.children.length-1; i >-1 ; i--) {
            list.children[i].remove();
        }
        if (xhPrive < 1) {
            xhPrive = 1;
            xhNext = 5;
            if (pageCount < 5)xhNext = pageCount;
        } else if (xhNext > pageCount) {
            xhNext = pageCount;
            xhPrive = pageCount-4; 
            if (xhPrive < 1) xhPrive = 1;
        }
        for (var i = xhPrive ; i < pages; i++) {
            var li = document.createElement("li");
            li.innerHTML = i;
            li.classList.add("floatleft");
            li.onclick = fenye;
            list.appendChild(li);
        } 
        for (var i = pages; i <= xhNext; i++) {
            var li = document.createElement("li");
            li.innerHTML = i;
            li.classList.add("floatleft");
            li.onclick = fenye;
            list.appendChild(li);
        }
        //为了添加样式
        var listafter = document.getElementById("yemenu"); 
        for (var i = 0; i < listafter.children.length; i++) {
            if (pages == listafter.children[i].innerHTML) listafter.children[i].classList.add("nowpageClass");
        }
    }
    //点击当前页
    function fenye(pages) { 
        var _this = window.event.srcElement.innerHTML;  
        if (pages == "jp") _this = document.getElementById('jump_count').value;
        else if (_this == "&lt;") { _this = Math.floor(nowPage) - 1; if (_this < 1) _this = 1; }
        else if (_this == "&gt;") { _this = Math.floor(nowPage) + 1; if (_this > pageCount) _this = pageCount; }
        nowPage = _this;
        fenyeMenu(nowPage);
    }
</script>