js div content display pagination_html/css_WEB-ITnose-HTML Tutorial-php.cn

js div content display pagination_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:55

Original

1137 people have browsed it

Due to work needs

The div has a fixed size and variable content, so if there is too much content, it will not be displayed naturally, so functions such as paging are needed. The following is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>根据div高度判断分页的代码</title></head><body><div id="frameContent" style="width:605px;height:400px">    内容 内容  很多很多内容 </div>              <div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;">    分页 页数</div><script language="javascript">var obj = document.getElementById("frameContent");  //获取内容层var pages = document.getElementById("pages");         //获取翻页层var pgindex=1;                                      //当前页window.onload = function()                             //重写窗体加载的事件{var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量    pages.innerHTML = "<b>共"+allpages+"页</b> ";     //输出页面数量for (var i=1;i<=allpages;i++){        pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";//循环输出第几页    } pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a>  <a href=\"javascript:gotopage('1');\">下一页</a>"}function gotopage(value){try{ value=="-1"?showPage(pgindex-1):showPage(pgindex+1); }catch(e){  }}function showPage(pageINdex){     obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //根据高度，输出指定的页 pgindex=pageINdex;}</script></body></html>

Copy after login

Actually, it is calculating the display height and content height of the div. How many pages are obtained in total? The displayed page is just how many pixels it starts to display.