<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.b1 > ul {
display: inline-block;
}
.b1 > ul > li {
list-style: none;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid silver;
}
.b1 > button {
width: 100px;
height: 30px;
border: 1px solid silver;
background: transparent;
outline: none;
}
</style>
</head>
<body>
<div class="b1">
<button id="uppage">上一页</button>
<ul class="menu">
</ul>
<button id="downpage">下一页</button>
</div>
<script>
window.onload = function () {
var menu = document.getElementsByClassName("menu")[0];
var nowpage = 1;
var totlepage = 20;
menu.innerHTML = showmenu(nowpage, totlepage);
var downpage = document.getElementById("downpage");
var uppage = document.getElementById("uppage");
downpage.onclick = function () {
nowpage++;
if (nowpage > totlepage) {
nowpage = totlepage;
}
menu.innerHTML = showmenu(nowpage, totlepage);
}
uppage.onclick = function () {
nowpage--;
if (nowpage < 1) {
nowpage = 1;
}
menu.innerHTML = showmenu(nowpage, totlepage);
}
}
function showmenu(current, totlepage) {
var str = "";
for (var i = 1; i <= totlepage; i++) {
if (i == 2 && i < current - 5) {
i = current - 3;
str += "<li>...</li>";
}
else if (i == current + 5 && current + 5 < totlepage) {
i = totlepage - 1;
str += "<li>...</li>";
}
else {
if (i == current) {
str += "<li style='background: #32bcff;color: #fff;'>" + i + "</li>"
}
else {
str += "<li>" + i + "</li>"
}
}
}
return str;
}
</script>
</body>
</html>
数据分页,带缩进的
最新推荐文章于 2023-06-10 14:58:27 发布