【js】使用javascript 實現靜態網頁分頁效果

本文轉載自查看原文 2018-01-18 14:22 1381 js/ html

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript 實現分頁效果純原生javascript實現分頁效果 JavaScript實現網頁回到頂部效果 Rainyday.js – 使用 JavaScript 實現雨滴效果 JavaScript學習——使用JS實現首頁輪播圖效果原生JS實現分頁效果1.0 使用jQuery Pagination Plugin實現分頁效果 uniapp 使用官方 pagination 實現分頁效果 js 網頁煙花效果 AR.js - 使用 JavaScript 在瀏覽器里實現 VR 效果