admin管理员组文章数量:1794759
前端 利用html实现分页切换效果
本篇文章主要要实现的功能html style="color:#2aa0ea" target=_blank class=infotextkey>效果如下：
包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能
整体思想：先定位一个中心页
上一页、下一页就是根据定位中心页然后加减就可以实现
首页就是要根据一次要展示几页，然后分别展示要展示的页数
尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .st1 { height: 60px; width: 90%; background-color: #ddd; margin-left: 5%; margin-top: 30px; } .st2 { height: 32px; width: 60px; background-color: #2ac; border-radius: 4px; margin-left: 6px; margin-top: 20px; float: left; color: #fff; text-align: center; line-height: 32px; font-size: 13px; } .chosed { background-color: #a00; } </style> </head> <body> <div id="div1" class="st1"></div> </body> <script type="text/javascript"> m1(12, 256, 10); //当前页索引，总页数，每页数量 function m1(index, allnum, pagesize) { var allpage = allnum / pagesize; allpage = parseInt(allpage); allpage = allnum % 10 > 0 ? allpage + 1 : allpage; if (index < 1) index = 1; if (index > allpage) index = allpage; var x = document.getElementById("div1"); var h = '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">首页</div>'; h += '<div class="st2" onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">上一页</div>'; if (index < 3) { if (index == 1) { h += '<div class="st2 chosed" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>'; h += '<div class="st2" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>'; } else { h += '<div class="st2" onclick="m1(1,' + allnum + ',' + pagesize + ')">1</div>'; h += '<div class="st2 chosed" onclick="m1(2,' + allnum + ',' + pagesize + ')">2</div>'; } h += '<div class="st2" onclick="m1(3,' + allnum + ',' + pagesize + ')">3</div>'; h += '<div class="st2"onclick="m1(4,' + allnum + ',' + pagesize + ')">4</div>'; h += '<div class="st2" onclick="m1(5,' + allnum + ',' + pagesize + ')">5</div>'; } if (index >= 3 && index <= (allpage - 2)) { h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>'; h += '<div class="st2"onclick="m1(' + (index - 1) + ',' + allnum + ',' + pagesize + ')">' + (index - 1) + '</div>'; h += '<div class="st2 chosed" onclick="m1(' + index + ',' + allnum + ',' + pagesize + ')">' + index + '</div>'; h += '<div class="st2" onclick="m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">' + (index + 1) + '</div>'; h += '<div class="st2" onclick="m1(' + (index + 2) + ',' + allnum + ',' + pagesize + ')">' + (index + 2) + '</div>'; } if (index > (allpage - 2)) { h += '<div class="st2" onclick="m1(' + (index - 4) + ',' + allnum + ',' + pagesize + ')">' + (index - 4) + '</div>'; h += '<div class="st2"onclick="m1(' + (index - 3) + ',' + allnum + ',' + pagesize + ')">' + (index - 3) + '</div>'; h += '<div class="st2" onclick="m1(' + (index - 2) + ',' + allnum + ',' + pagesize + ')">' + (index - 2) + '</div>'; if (index == allpage) { h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>'; h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>'; } else { h += '<div class="st2" onclick=" m1(' + (allpage - 1) + ',' + allnum + ',' + pagesize + ')">' + (allpage - 1) + '</div>'; h += '<div class="st2 chosed" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">' + allpage + '</div>'; } } h += '<div class="st2" onclick=" m1(' + (index + 1) + ',' + allnum + ',' + pagesize + ')">下一页</div>'; h += '<div class="st2" onclick=" m1(' + allpage + ',' + allnum + ',' + pagesize + ')">尾页</div>'; h += '<div class="st2">共' + allpage + '页</div>'; h += '<div class="st2">共' + allnum + '条</div>'; h += '<div class="st2"><input id="pageindex" type="text" style="width:50px;height:26px;border:0px;"> </div>'; h += '<div class="st2" onclick="gopage(' + allnum + ',' + pagesize + ')">跳转</div>'; x.innerHTML = h; } function gopage(allnum, pagesize) { var text = document.getElementById("pageindex").value; text = parseInt(text); m1(text, allnum, pagesize); } </script> </html>版权声明：本文标题：前端 利用html实现分页切换效果 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686996219a126754.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论