Home > Web Front-end > HTML Tutorial > js div content display pagination_html/css_WEB-ITnose

js div content display pagination_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:51:55
Original
1153 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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template