原生JS实现分页点击控件原生JS实现分页点击控件

这是一个面试题，要求使用原生JS实现一个分页点击控件，供大家参考，具体内容如下
1、点击首页、上一页、下一页和末页要实现相应的数字编号变红。
2、在页数1 不能够点击首页和上一页。
3、在页数10不能够点击下一页。
4、实现一个input输入页数跳转页码功能。

HTML

Page - 锐客网*{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}This is a headerThis is a contentThis is some content

第1页
This is a footer

JavaScript

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'); document.getElementById('btns').children[i].classList.add('now'); NUM = i+1; })} //监听父级冒泡函数,控制显示内容区文字及设置按钮状态btns.addEventListener('click', () => {// console.log(NUM) if (NUM === 1) {homepage.disabled = true; prevpage.disabled = true; lastpage.disabled = false; nextpage.disabled = false; }else if (NUM > 1 && NUM < 10 ) {homepage.disabled = false; prevpage.disabled = false; lastpage.disabled = false; nextpage.disabled = false; }else{homepage.disabled = false; prevpage.disabled = false; lastpage.disabled = true; nextpage.disabled = true; }document.getElementById('enter').children[2].innerText = NUM; document.getElementById('word').innerText = 'Now it is the ' + NUM + ' Element'; }); } //具体函数实现function homePage() {document.getElementsByClassName('now')[0].classList.remove('now'); document.getElementById('btns').children[0].classList.add('now'); NUM = 1; } function lastPage() {document.getElementsByClassName('now')[0].classList.remove('now'); document.getElementById('btns').children[9].classList.add('now'); NUM = 10; } function nextPage(){document.getElementsByClassName('now')[0].classList.remove('now'); document.getElementById('btns').children[NUM].classList.add('now'); NUM++; } function prevPage(){document.getElementsByClassName('now')[0].classList.remove('now'); document.getElementById('btns').children[NUM-2].classList.add('now'); NUM--; } //input函数实现function enterPage(){document.getElementsByClassName('now')[0].classList.remove('now'); var page_number = parseInt(document.getElementById('enter').children[0].value); // console.log(page_number); document.getElementById("btns").children[page_number-1].classList.add('now'); NUM=page_number; } window.onload = changepage();

最后实现后如下图