使用javascript 实现静态网页分页效果_js自定义静态分页-优快云博客

本文详细介绍了一种静态网页分页效果的实现方法，通过HTML、CSS和JavaScript代码，展示了如何控制列表项的显示和隐藏，以达到分页的效果。同时，文章提供了完整的代码示例，包括样式设置和JavaScript函数，用于动态更新页面内容和分页链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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="###" οnclick=“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;” οnclick="upPage(’+i+’)">’+(i+1)+’</a> ’

else strC += ‘<a href="###" οnclick="upPage(’+i+’)">’+(i+1)+’</a> ’

}

var strE = ’ <a href="###" οnclick=“upPage(’+(PagesLen-1)+’)”>尾页</a> ';//尾页

var strE2 = currentPage + 1 + “/” + PagesLen + “页” + " 共" + j + “条” ;//共*条

document.getElementById(“page”).innerHTML = strS + strC + strE + strE2;

}

</script>

</body>

</html>