本篇文章主要要实现的功能效果如下：
包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能
整体思想：先定位一个中心页
上一页、下一页就是根据定位中心页然后加减就可以实现
首页就是要根据一次要展示几页，然后分别展示要展示的页数
尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数
<!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>
