关于js实现分页效果的简单代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js分页</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } .list-box { width: 500px; margin: 50px auto; background-color: darkgrey; } .list-content { width: 480px; height: 390px; padding: 10px; overflow: hidden; } .list-content li { height: 25px; list-style: none; border-bottom: 1px dotted #e8e8e8; } .list-content span { float: right; } .list-content li a { color: #000; font-size: 14px; line-height: 25px; } .list-menu { width: 100%; text-align: right; height: 25px; position: relative; bottom: 0; /*background-color: red;*/ } .list-menu a { color: black; font-size: 14px; margin-right: 5px; text-decoration: none; } .list-menu a:hover { color: #f00; text-decoration: none; } </style> <body> <div class="list-box"> <div class="list-content" id="list-content"> <ul> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒555出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的555三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇ss】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三ss行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行dff书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年ff》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇222】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】334“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美455女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒555出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的555三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇ss】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三ss行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行dff书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年ff》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇222】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】334“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美455女程序员的蜕变史</a><span>2014-06-01</span></li> <li><a href="">【慕客访谈 用户篇】“有为屌丝”在路上</a><span>2014-06-01</span></li> <li><a href="">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li> <li><a href="">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-06-01</span></li> <li><a href="">【慕课访谈】破茧成蝶—美女程序员的蜕变史</a><span>2014-06-01</span></li> </ul> </div> <div class="list-menu" id="list-menu"></div> </div> </body> <script> //pageNum 消息条数 //pageNow 当前页 //pagelimit 每页消息数目 //pageCount 总页数 //pagePre 上一页 //pageNext 下一页 //pagelist 页面列表显示数目 var obj, pageNum, pageCount; var pageNow = 1; var pagelimit = 15; var pagelist = 4; var listbox = "list-content"; var listmenu = "list-menu"; onload = function() { obj = document.getElementById(listbox).getElementsByTagName('li'); pageNum = obj.length; //总消息数目 pageCount = Math.ceil(pageNum / pagelimit); showPage(1); } function showPage(p) { pageNow = p; if (pageNow < 1) { return pageNow = 1; } else if (pageNow > pageCount - 1) { return pageNow = pageCount; } for (var i = 0; i < pageNum; i++) { obj[i].style.display = "none"; } for (var i = p * pagelimit; i < (p + 1) * pagelimit; i++) { if (obj[i]) obj[i].style.display = "block"; } indexPage = '<a href="#" onclick="showPage(0)">首页</a>'; pagePre = '<a href="#" onclick="showPage(' + (pageNow - 1) + ')">上一页</a>'; pageNext = '<a href="#" onclick="showPage(' + (pageNow + 1) + ')">下一页</a>'; lastPage = '<a href="#" onclick="showPage(' + (pageCount - 1) + ')">末页</a>'; var pagenum = ""; if (pageCount <= pagelist) { for (var j = 1; j <= pageCount; j++) { pagenum += '<a href="#" onclick="showPage(' + (j - 1) + ')">' + j + '</a>'; } } else { if (pageNow <= (pageCount - pagelist)) { for (var j = 0; j <= (pagelist - 1); j++) { pagenum += '<a href="#" onclick="showPage(' + (pageNow + j) + ')">' + (pageNow + j) + '</a>'; } pagenum += '...'; } else { for (var j = 1; j <= pagelist; j++) { pagenum += '<a href="#" onclick="showPage(' + (pageNow + j) + ')">' + (pageNow + j) + '</a>'; } } } document.getElementById(listmenu).innerHTML = indexPage + pagePre + pagenum + pageNext + lastPage; } </script> </html>
还有很多漏洞，有时间再补
