原生JS實現分頁點選控制元件
阿新 • • 發佈：2021-08-23
這是一個面試題，要求使用原生實現一個分頁點選控制元件，供大家參www.cppcns.com考，具體內容如下
1、點選首頁、上一頁、下一頁和末頁要實現相應的數字編號變紅。
2、在頁數1 不能夠點選首頁和上一頁。
3、在頁數10不能夠點選下一頁。
4、實現一個input輸入頁數跳轉頁碼功能。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page</title>
<style>
*{
margin: 0px;
list-style-type: none;
}
header,footer,section{
box-sizing: border-box;
text-align: center;
padding: 5px;
}
header,footer{
background-color: aquamarine;
font-size: 25px;
}
#content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
height: 500px;
background-color: antiquewhite;
}
.content{
border: 1px dotted saddlebrown;
min-width: 700px;
min-height: 440px;
background-color: darkcyan;
}
#changePage li{
display: inline-block;
}
.now{
color:red;
}
.hide{
display: hidden
}
</style>
</head>
<body>
<header>This is a header</header>
<section>
<div id="content">
<h2>This is a content</h2>
<div class="content">
<p>This is some content</p>
<p id="word"></p>
</div>
<div id="changePage">
<ul>
<li><button id="homePage" disabled="true">首頁</button></li>
<li><button id="prev" disabled="true">上一頁</button></li>
<li id="btns">
<button class="now">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</li>
<li><button id="next">下一頁</button></li>
<li><button id="lastPage">末頁</button></li>
<li id ="enter"><input type="number" value="1" min="1" max="10">
<button>確定</button>
第<span>1</span>頁</li>
</ul>
</div>
</div>
</section>
<footer>This is a footer</footer>
<script src="js/page.js"></script>
</body>
</html>
let NUM = 1;
//主函式,繫結事件
function changepage() {
let btns = document.getElementById('changePage');
let element_1 = document.getElementById('btns').children;
// console.log(element_1)
let homepage = document.getElementById('homePage');
let lastpage = document.getElementById('lastPage');
let prevpage = document.getElementById('prev');
let nextpage = document.getElementById('next');
let enterpage = document.getElementById('enter').children[1];
// console.log(enterpage)
//繫結四個按鈕
homepage.addEventListener('click',() => {
homePage();
});
lastpage.addEventListener('click',() => {
lastPage();
});
prevpage.addEventListener('click',() => {
prevPage();
});
nextpage.addEventListener('click',() => {
nextPage();
});
enterpage.addEventListener('click',()=>{
enterPage();
})
//繫結數字按鈕
for (let i=0; i<10; i++){
element_1[i].addEventListener('click',()=>{
document.getElementsByClassName('now')[0].classList.remove('now');
gzXmtV
最後實現後如下圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。