【js】使用javascript 实现静态网页分页效果 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-Type" content="text/html;charset=utf-8">
        <title>网页特效 静态代码的分页效果 </title>
        <style type="text/css">
            li{display:none}
        </style>
    </head>
<body>
    <ul id="box">
        <li>静态网页分页效果01页</li>
        <li>静态网页分页效果02页</li>
        <li>静态网页分页效果03页</li>
        <li>静态网页分页效果04页</li>
        <li>静态网页分页效果05页</li>
        <li>静态网页分页效果06页</li>
        <li>静态网页分页效果07页</li>
        <li>静态网页分页效果08页</li>
        <li>静态网页分页效果09页</li>
        <li>静态网页分页效果10页</li>
        <li>静态网页分页效果11页</li>
        <li>静态网页分页效果12页</li>
        <li>静态网页分页效果13页</li>
        <li>静态网页分页效果14页</li>
        <li>静态网页分页效果15页</li>
        <li>静态网页分页效果16页</li>
        <li>静态网页分页效果17页</li>
        <li>静态网页分页效果18页</li>
        <li>静态网页分页效果19页</li>
        <li>静态网页分页效果20页</li>
    </ul>
    <div id="page"></div>
    <script language="javascript">
        var obj,j;
        var page = 0;
        var currentPage = 0;//当前页
        var listNum = 2;//每页显示<ul>数
        var PagesLen;//总页数
        var PageNum = 4;//分页链接接数(5个)
        window.onload = function(){
            obj = document.getElementById("box").getElementsByTagName("li");
            j = obj.length//li的个数
            PagesLen = Math.ceil(j / listNum);//总页数
            upPage(0)
        }
        function upPage(p){
            currentPage = p
            //内容变换
            for (var i = 0; i < j; i++){
                obj[i].style.display="none"
            }
            for (var i = p * listNum; i < (p+1) * listNum; i++){
                if(obj[i])obj[i].style.display = "block";
                console.log(i);
            }
            //分页链接变换
            var strS = '<a href="###" onclick="upPage(0)">首页</a>  ';//首页
            var PageNum_2 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2)+1 : Math.ceil(PageNum / 2);
            var PageNum_3 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) : Math.ceil(PageNum / 2) + 1;
            console.log(PageNum_2,PageNum_3);
            var strC = "",startPage,endPage;
            if (PageNum >= PagesLen) {
                startPage = 0; 
                endPage = PagesLen - 1;
            }else if (currentPage < PageNum_2){ 
                startPage = 0; 
                endPage = PagesLen - 1 > PageNum ? PageNum : PagesLen - 1;
            }else {
                startPage=(currentPage+PageNum_3 >= PagesLen) ? PagesLen-PageNum - 1 : currentPage-PageNum_2 + 1;
                var t = startPage + PageNum;
                endPage =(t > PagesLen) ? PagesLen - 1 : t;
            }
            console.log(startPage,endPage);
            for (var i = startPage;i <= endPage; i++){
                 if (i == currentPage)strC += '<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
                 else strC += '<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
            }
            var strE = ' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  ';//尾页
            var strE2 = currentPage + 1 + "/" + PagesLen + "页" + "  共" + j + "条" ;//共*条
            document.getElementById("page").innerHTML = strS + strC + strE + strE2;
        }
    </script>
</body>
</html>

 

posted on 2018-01-18 14:22  smile轉角  阅读(2380)  评论(0)  编辑  收藏  举报

导航