码迷,mamicode.com
首页 > Web开发 > 详细

js 分页

时间:2016-05-07 08:41:35      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

js 分页

标签:

原文地址:http://blog.csdn.net/y515789/article/details/51333271

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!