js数字分页

最新推荐文章于 2019-09-10 16:01:32 发布

yteasyhappy

最新推荐文章于 2019-09-10 16:01:32 发布

阅读量238

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/yteasyhappy/article/details/42968301

版权

js 专栏收录该内容

6 篇文章

订阅专栏

<div id="pagebox"></div>

<input type="button" οnclick="test();" />

<script>

function test(){

    var page = 10;
    var maxPage = 50;
    var htmlStr = "";
    var num = 5;


    if(page > 1){
        htmlStr +="<a href='#' >上一页</a>"
    }
    if(page > num){
        htmlStr += "<a href='#' >...</a>";
    }
    for(i=1; i <= maxPage; i++){
        if(i > page - num && i < page + num){
            if(page == i){
                htmlStr += "|"+i;
            }else{
                htmlStr += "<a href='#' >|"+i+"</a>";
            }
        }
    }
    if(page < maxPage - num){
        htmlStr += "<a href='#' >|...</a>";
    }
    if(page < maxPage){
        htmlStr +="<a href='#' >下一页</a>"
    }

    document.getElementById("pagebox").innerHTML = htmlStr;


}

</script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js" />