分页 js

转载于 2017-08-30 16:26:00 发布 · 42 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oxiaojiano/p/7453756.html

纯js分页

<!DOCTYPE html>

分页

首页
1
2
3
4
5
6
7
8
9
10
下一页
末页

代码实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <style> .news-pages{ padding:20px 0 140px 0; } .news-page{ width: 22px; height:22px; border:1px solid #d5d5d5; border-radius: 4px; display:inline-block; text-align: center; line-height: 22px; font-size: 12px; color:#afafaf; } .page-first,.page-last{ width:40px; } .page-next{ width:50px; } .page-one{ background: #a9752f; color:#fff; } </style> </head> <body> <div class="news-pages"> <span class="news-page page-first">首页</span> <span class="news-page page-one">1</span> <span class="news-page">2</span> <span class="news-page">3</span> <span class="news-page">4</span> <span class="news-page">5</span> <span class="news-page">6</span> <span class="news-page">7</span> <span class="news-page">8</span> <span class="news-page">9</span> <span class="news-page">10</span> <span class="news-page page-next">下一页</span> <span class="news-page page-last">末页</span> </div> </body> <script> //兼容microsoft eage 写法 NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; var pages = document.querySelectorAll('.news-page'); var first = document.querySelector('.page-one'); var next = document.querySelector('.page-next'); var last = document.querySelector('.page-last'); var num; for(var i= 0;i<pages.length;i++){ pages[i].index = i; pages[i].onclick = function(){ for( page of pages){ page.style.background = '#fff'; page.style.color = '#afafaf'; } // 首页点击 if(this.index == 0){ this.style.background = '#fff'; this.style.color = '#afafaf'; first.style.background = '#a9752f'; first.style.color ="#fff"; num=1; // 最后一页 }else if(this.index == pages.length-1){ this.style.background = '#fff'; this.style.color = '#afafaf'; pages[pages.length-3].style.background = '#a9752f'; pages[pages.length-3].style.color = '#fff'; num=10; // 下一页 }else if(this.index ==pages.length-2){ this.style.background = '#fff'; this.style.color = '#afafaf'; if(num){ num+=1 if(num<11){ pages[num].style.background = '#a9752f'; pages[num].style.color = '#fff'; }else{ pages[pages.length-3].style.background = '#a9752f'; pages[pages.length-3].style.color = '#fff'; num =pages.length-3; } }else{ pages[2].style.background = '#a9752f'; pages[2].style.color = '#fff'; num=2 } }else{ num = Number(this.innerHTML); this.style.background = '#a9752f'; this.style.color ="#fff"; } console.log(num) } } </script> </html>

转载于:https://www.cnblogs.com/oxiaojiano/p/7453756.html