原生JS實現(xiàn)分頁點擊控件
更新時間:2021年08月20日 13:18:41 作者:吸貓一時爽
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)分頁點擊控件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這是一個面試題,要求使用原生JS實現(xiàn)一個分頁點擊控件,供大家參考,具體內容如下
1、點擊首頁、上一頁、下一頁和末頁要實現(xiàn)相應的數(shù)字編號變紅。
2、在頁數(shù)1 不能夠點擊首頁和上一頁。
3、在頁數(shù)10不能夠點擊下一頁。
4、實現(xiàn)一個input輸入頁數(shù)跳轉頁碼功能。
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>
JavaScript
let NUM = 1; //主函數(shù),綁定事件 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(); }) //綁定數(shù)字按鈕 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; }) } //監(jiān)聽父級冒泡函數(shù),控制顯示內容區(qū)文字及設置按鈕狀態(tài) 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'; }); } //具體函數(shù)實現(xiàn) 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函數(shù)實現(xiàn) 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();
最后實現(xiàn)后如下圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript中的公有、私有、特權和靜態(tài)成員用法分析
這篇文章主要介紹了JavaScript中的公有、私有、特權和靜態(tài)成員用法,以實例形式分析了其使用方法,簡單易懂,對于初學javascript的朋友具有不錯的學習與借鑒價值,需要的朋友可以參考下2014-11-11JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù)
這篇文章主要介紹了JS如何操作DOM基于表格動態(tài)展示數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10使用bootstrap typeahead插件實現(xiàn)輸入框自動補全之問題及解決辦法
這篇文章主要介紹了使用bootstrap typeahead插件實現(xiàn)輸入框自動補全之問題及解決辦法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07JavaScript中apply與call的用法意義及區(qū)別說明
JavaScript中有一個call和apply方法,其作用基本相同,但也有略微的區(qū)別。2010-04-04