我正在寻找＆＃34;年＆＃34;的分页代码用纯JavaScript。好吧，我已经设法创建了所需的所有按钮，但我需要上一个和下一个按钮的逻辑显示下一个按钮并隐藏第一个按钮，同时单击nextButton和相同的反向上一个按钮，有人可以帮助我这个。感谢
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: white;
border: none;
padding: 5px 10px;
text-align: center;
color:black;
text-decoration: none;
display: inline-block;
font-size: 15px;
border-radius: 50px;
margin :1px;
cursor: pointer;
transition: all 0.5s;
border: 1px solid grey;
}
.button:hover{
padding-right: 25px;
background-color: #008CBA;
color:white
}
.button:focus{
background:red;
}
button.ex1:hover, button.ex1:active {color: red;}
</style>
</head>
<body>
<div id="page"></div>
<script>
var startwith = 2001; // > initialize the button starting value
var size = 35; // > initialize the total no of buttons to be created
var increamentBy = 1; // > incremets the "startwith" intiliazation with 1
var max = 10;
var btnMap = new Map();
var tempMap = new Map();
createPrevArrow();
createBtn();
createNextArrow();
setOnly5Records();
function createBtn(){ // > creates the total no of buttons for pagination
var pageDiv = document.createElement('div');
for(var i = 0; i < size ;i++)
{
var inc = startwith + i;
var btn = document.createElement("BUTTON");
btn.id = inc;
btn.innerHTML = inc;
btn.className = "button";
btn.title = inc;
btn.addEventListener('click', function(){
callFunc(this.id);});
btnMap.set(i, btn);
tempMap.set(i, btn);
pageDiv.appendChild(btn);
document.getElementById("page").appendChild(pageDiv);
}
}
function createPrevArrow() // > creates the previous button
{
var prevDiv = document.createElement('div');
prevDiv.style.width ="10px";
var prevArrow = document.createElement("BUTTON");
prevArrow.id = "prev";
prevArrow.innerHTML = "«";
prevArrow.className = "button";
prevArrow.onclick = callPrev;
prevDiv.appendChild(prevArrow);
document.getElementById("page").appendChild(prevDiv);
}
function createNextArrow() // > creates the next button
{
var nxtDiv = document.createElement('div');
var nextArrow = document.createElement("BUTTON");
nextArrow.id = "nxt";
nextArrow.innerHTML = "»";
nextArrow.className = "button";
nextArrow.onclick = callNext;
nxtDiv.appendChild(nextArrow);
document.getElementById("page").appendChild(nxtDiv);
}
function setOnly5Records(){ // > This method is to show only 5 buttons
for(var i=5; i< size;i++)
{
var btn1 = btnMap.get(i);
btn1.style.display = "none";
}
}
function callFunc(inc)
{
alert(JSON.stringify(inc));
}
function callNext()
{
alert("callNext");
}
function callPrev()
{
alert("callPrev");
}
</script>
</body>
</html>
答案 0 :(得分：0)
愿这对你有所帮助。
<html>
<head>
<style>
.button {
background-color: white;
border: none;
padding: 5px 10px;
text-align: center;
color:black;
text-decoration: none;
display: inline-block;
font-size: 15px;
border-radius: 50px;
margin :1px;
cursor: pointer;
transition: all 0.5s;
border: 1px solid grey;
}
.button:hover{
padding-right: 25px;
background-color: #008CBA;
color:white
}
.button:focus{
background:red;
}
button.ex1:hover, button.ex1:active {color: red;}
</style>
</head>
<body>
<div id="page"></div>
<script>
var startwith = 2001; // > initialize the button starting value
var size = 35; // > initialize the total no of buttons to be created
var increamentBy = 1; // > incremets the "startwith" intiliazation with 1
var max = 10;
var m = 5;
var btnMap = new Map();
var tempMap = new Map();
createPrevArrow();
createBtn();
createNextArrow();
setOnly5Records();
function createBtn(){ // > creates the total no of buttons for pagination
var pageDiv = document.createElement('div');
for(var i = 0; i < size ;i++)
{
var inc = startwith + i;
var btn = document.createElement("BUTTON");
btn.id = inc;
btn.innerHTML = inc;
btn.className = "button";
btn.title = inc;
btn.addEventListener('click', function(){
callFunc(this.id);});
btnMap.set(i, btn);
tempMap.set(i, btn);
pageDiv.appendChild(btn);
document.getElementById("page").appendChild(pageDiv);
}
}
function createPrevArrow() // > creates the previous button
{
var prevDiv = document.createElement('div');
prevDiv.style.width ="10px";
var prevArrow = document.createElement("BUTTON");
prevArrow.id = "prev";
prevArrow.innerHTML = "«";
prevArrow.className = "button";
prevArrow.onclick = callPrev;
prevDiv.appendChild(prevArrow);
document.getElementById("page").appendChild(prevDiv);
}
function createNextArrow() // > creates the next button
{
var nxtDiv = document.createElement('div');
var nextArrow = document.createElement("BUTTON");
nextArrow.id = "nxt";
nextArrow.innerHTML = "»";
nextArrow.className = "button";
nextArrow.onclick = callNext;
nxtDiv.appendChild(nextArrow);
document.getElementById("page").appendChild(nxtDiv);
}
function setOnly5Records(){ // > This method is to show only 5 buttons
for(var i=m; i< size;i++)
{
var btn1 = btnMap.get(i);
btn1.style.display = "none";
}
}
function callFunc(inc)
{
alert(JSON.stringify(inc));
}
function callNext()
{
alert("callNext");
startwith++;
createBtn();
setOnly5Records();
}
function callPrev()
{
alert("callPrev");
startwith--;
createBtn();
setOnly5Records();
}
</script>
</body>
</html>