js 分页

来源：互联网发布：html php 编辑：程序博客网时间：2024/06/05 01:23
预览效果
<!DOCTYPE HTML><html><head>    <meta charset="gbk"/><style type="text/css">#div2{    margin:0 auto;    height:400px;    width:800px;    overflow:hidden;    background:#eee;}#page{    margin:0 auto;    height:20px;    width:100px;}#other{    width:100px;}a{    text-decoration: none;}</style></head><body>    <div id="text"></div>    <div id="div2">        <p>快点走</p>        <p>“你们都已经死了，都变成鬼了，快点。"</p>        <p>“你是王爷？千万子民、三万铁骑？人世间的王爷在我阴间地府什么都不是！”</p>        <p>一个个高大魁梧的鬼兵满脸狰狞，怒吼着挥舞鞭子抽打着，鞭子上闪烁着电光，抽打在那些鬼魂上，特别那个叫嚣着自己是王爷的鬼魂更是被抽了数十鞭子，抽的那一鬼魂都变得稀薄快要消散才停下。</p>        <p>我应该已经死了，那……这里是阴曹地府？”纪宁凭空出现，不由好奇观察着陌生环境，便听到那王爷的叫嚣，这让纪宁更生疑惑，“千万子民？三万铁骑？地球现在是现代社会，哪有什么三万铁骑？</p>        <p>快点！”前方那高大魁梧全身泛着青光的牛头鬼兵盯着纪宁咆哮道</p>        <p>无数的白衣人影排成一条条长龙，在缓慢前进着，每一条队伍的末尾都会凭空出现一白衣人影，这些白衣人影有的摇头叹息，有的嚎啕大哭，有的叫嚣怒骂，有的错愕疑惑。        </p>        <p>“我父是大雪山妖王，你敢打我！我吃了你，吼！”</p>        <p>“别打！”</p>        <p>“啊！”</p>        <p>这些鬼魂刚进入阴间冥界还以为自己没死，一被抽打，不少还愤怒叫嚣，可很快就被抽打的明白过来……他们已经死了，任凭生前多么风光，死后都是一场空。</p>        <p> ……</p>        <p>时间流逝，纪宁在无数鬼魂队伍中已经走了很久了，他不敢说话，说话就会被牛头马面的鞭子抽打，这般麻木的行走已经很久很久了，幸好鬼魂不知道饥饿。</p>        <p> 在麻木走了很久后的一天。</p>        <p> “纪宁！”一道宛如雷声轰隆的声音，在天地间不断震荡产生回音，密密麻麻无数鬼魂们都抬头看向天边，纪宁也看去，只见远处天边处有了一翻滚着的巨大黑云，黑云上站着的是一散发着黑光的巨大牛头鬼神。</p>        <p> 这巨大的牛头鬼神高约有万丈，宛如巍峨高山，驾驭着黑云，瞬间便从天边飞到。</p>        <p> “纪宁。”巨大牛头鬼神在高空黑云之上，俯瞰下方，双眸射出两道万丈金色光柱，划过长空直接笼罩过来，照射在下方傻愣愣的纪宁身上。</p>        <p>  巨大牛头鬼神双眸射出的万丈金光，直接在纪宁身上一绕，纪宁便凭空消失在了队伍中，那些普通的牛头马面鬼兵们一个个都乖乖的不敢吭声，所有的鬼魂们都处于惊愕呆滞中，许久才反应过来。</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <p> ……</p>        <div id="other"> </div>    </div>    <div id="page"> </div></body><script type="text/javascript">var divObject = document.getElementById("div2");    //所有内容var pageObject = document.getElementById("page");   //显示分页var other = document.getElementById("other");       //补全一页var allPage = Math.ceil(parseInt(divObject.scrollHeight)/parseInt(divObject.offsetHeight));other.style.height = parseInt(divObject.offsetHeight)*allPage - parseInt(divObject.scrollHeight)+'px';var currentPage = 1;goPage(0);function goPage(val){    val==1?currentPage++:currentPage--;    if(currentPage < 1 || currentPage == 1) {        currentPage = 1;        pageObject.innerHTML = ' << 1/'+allPage +'<a onclick="goPage(1)" href="javascript:void(0)"> >> </a>';    }    else if(currentPage > allPage || currentPage == allPage){        currentPage = allPage;        pageObject.innerHTML = '<a  onclick="goPage(-1)" href="javascript:void(0)"> << </a>'+currentPage+'/'+allPage +' >> ';    }    else{        pageObject.innerHTML = '<a  onclick="goPage(-1)" href="javascript:void(0)"> << </a>'+currentPage+'/'+allPage +'<a onclick="goPage(1)" href="javascript:void(0)"> >> </a>';    }    rollPage(currentPage);}function rollPage(page){    divObject.scrollTop = (page-1)*parseInt(divObject.offsetHeight)-page*20;}var text = document.getElementById("text");text.innerHTML += "<br/>  allPage:"+allPage ;text.innerHTML += "<br/>  divObject.offsetHeight:"+divObject.offsetHeight;  text.innerHTML += "<br/>  divObject.scrollHeight:"+divObject.scrollHeight;text.innerHTML += "<br/>  other.offsetHeight:"+other.offsetHeight;</script></html>
0 0