<!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="https://bbs.csdn.net/topics/#!" 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="https://bbs.csdn.net/topics/###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
else strC += '<a href="https://bbs.csdn.net/topics/#!'+(i+1)+'" onclick="upPage('+i+')">'+(i+1)+'</a> '
document.getElementsByTagName("title")[0].innerText = ''+(i+1)+'';
}
var strE = ' <a href="https://bbs.csdn.net/topics/#!" onclick="upPage('+(PagesLen-1)+')">尾頁</a> ';//尾頁
var strE2 = currentPage + 1 + "/" + PagesLen + "頁" + " 共" + j + "條" ;//共*條
document.getElementById("page").innerHTML = strS + strC + strE + strE2;
}
</script>
</body>
</html>
能否實作 添加 document.getElementsByTagName("title")[0].innerText = '當前是 xx 頁';
點擊頁數 修改標題 當前是 第1頁
uj5u.com熱心網友回復：
以自行解決 謝謝uj5u.com熱心網友回復：
document.title = "當前是 xx 頁"轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/98467.html
標籤：JavaScript
上一篇：使用vue-recourse post請求 本地json檔案 報錯 404 no found
下一篇：微信小程式下拉框被遮住問題