代码描述:javascript数字分页效果。javascript实现的数字分页效果代码下载
现在很多网站都有使用数字分页效果,这当然是有原因的,因为数字分页更为清晰,导航效果更为方便,下面就是一段这样的代码实例,希望能够给需要的朋友带来一定的帮助。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> .page{margin:2em;} .page a{ text-decoration:none; display:inline-block; line-height:14px; padding:2px 5px; color:#333; border:1px solid #ccc; margin:0 2px; } .page a:hover, .page a.on{ background:#999; color:#fff; border:1px solid #333; } .page a.unclick, .page a.unclick:hover{ background:none; border:1px solid #eee; color:#999; cursor:default; } </style> <script type="text/javascript"> function setPage(container, count, pageindex){ var container = container; var count = count; var pageindex = pageindex; var a = []; if (pageindex == 1){ a[a.length] = "<a href=\\"#\\" class=\\"prev unclick\\">prev</a>"; } else{ a[a.length] = "<a href=\\"#\\" class=\\"prev\\">prev</a>"; } function setPageList(){ if (pageindex == i){ a[a.length] = "<a href=\\"#\\" class=\\"on\\">" + i + "</a>"; } else{ a[a.length] = "<a href=\\"#\\">" + i + "</a>"; } } if (count <= 10){ for (var i = 1; i <= count; i++){ setPageList(); } } else { if (pageindex <= 4){ for (var i = 1; i <= 5; i++){ setPageList(); } a[a.length] = "...<a href=\\"#\\">" + count + "</a>"; } else if (pageindex >= count - 3){ a[a.length] = "<a href=\\"#\\">1</a>..."; for (var i = count - 4; i <= count; i++){ setPageList(); } } else{ a[a.length] = "<a href=\\"#\\">1</a>..."; for (var i = pageindex - 2; i <= pageindex + 2; i++){ setPageList(); } a[a.length] = "...<a href=\\"#\\">" + count + "</a>"; } } if (pageindex == count){ a[a.length] = "<a href=\\"#\\" class=\\"next unclick\\">next</a>"; } else{ a[a.length] = "<a href=\\"#\\" class=\\"next\\">next</a>"; } container.innerHTML = a.join(""); var pageClick = function(){ var oAlink = container.getElementsByTagName("a"); var inx = pageindex; oAlink[0].onclick = function(){ if (inx == 1){ return false; } inx--; setPage(container, count, inx); return false; } for (var i = 1; i < oAlink.length - 1; i++){ oAlink[i].onclick = function(){ inx = parseInt(this.innerHTML); setPage(container, count, inx); return false; } } oAlink[oAlink.length - 1].onclick = function(){ if (inx == count){ return false; } inx++; setPage(container, count, inx); return false; } }() } window.onload=function(){ setPage(document.getElementsByTagName("div")[0],10,1); setPage(document.getElementsByTagName("div")[1],13,6); } </script> </head> <body> <div class="page"></div> <div class="page"></div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能