欢迎留言或者加本人QQ172360937咨询
这段代码是用原生 js 写的一个分页的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} #ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;} #ul li{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;} #div{width:100%;text-align: center;position:absolute;bottom:30px;} #ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;} </style> </head> <body> <div id='div'> <ul id='ul'> <li>首页</li> <li>上一页</li> <li></li> <li></li> <li></li> <li>下一页</li> <li>尾页</li> </ul> </div> <script> var ul = document.getElementById('ul'); var li = ul.getElementsByTagName('li'); li[2].className = 'background'; var num01 = 1; var num02 = 800/*总数*/; //1 //首页的点击事件 li[li.length-li.length].onclick = function(){ Background(2); num01 = 1; content(num01); } //2 //尾页的点击事件 li[li.length-1].onclick = function(){ Background(li.length-3); num01 = num02-(li.length-5); content(num01) } //3 //上一页的点击事件 li[li.length-(li.length-1)].onclick = function(){ for(var j = 0;j<li.length-4;j++){ if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){ if(j+2 != li.length-(li.length-2)){ Background(j+1); } break; } } if(j+2 == li.length-(li.length-2)){ num01 -- ; content(num01); } } //4 下一页的点击事件 li[li.length-2].onclick = function(){ for(var j = 0;j<li.length;j++){ if(li[j].className == 'background' && li[j].innerHTML < num02){ //* && 写最后一页的总数*/ if(j+1 < li.length-2){ Background(j+1); } break; } } if(j+1 == li.length-2){ num01++; content(num01); } } // 分页的点击事件 for(var i = 0;i<li.length-4;i++){ li[i+2].index = i+2; li[i+2].onclick = function(){ Background(this.index); } } //把所有的分页背景去掉，给指定的分页添加背景颜色 function Background(num){ for(var i = 0;i<li.length;i++){ li[i].className = li[i].className.replace('background',''); li[num].className = 'background'; } } // 给li 写内容 content(num01); function content(number){ for(var i=0;i<li.length-4;i++){ li[i+2].innerHTML = number; number++; } } </script> </body> </html>