您的位置：首页 > Web前端 > JavaScript
js 分页

2016-05-06 17:24 519 查看
<!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&
b982
gt; ……</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 分页 javascript div
相关文章推荐
新的分享
章节导航