JavaScript简单分页
来源：互联网 发布：iqr 淘宝网 编辑：程序博客网 时间：2024/06/06 04:51
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jsfenye.aspx.cs" Inherits="jsfenye" %><!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 runat="server"> <title></title> <style type="text/css"> #div1 { width:50%; height:30%; background-color:Green; font-size:20px; padding-top:10px; } #firstpage { float:left; width:5%; } #doingpages { float:left; width:auto; } #lastpage { float:left; width:5%; } </style> <script type="text/javascript"> var allpagetext; //保存div中的总内容 var mynowindex; //保存当前的页索引 var pagecount; //总页数 function mychar() { var mydoingdiv = document.getElementById("doingpages"); //当改变每页的字符数时，需要将以前的链接删除 if (mydoingdiv.childNodes.length > 0) { var myalength=mydoingdiv.childNodes.length; for (var i = 0; i < myalength; i++) { var olda = mydoingdiv.getElementsByTagName('a')[i]; if (olda != null) { olda.parentNode.removeChild(olda); //删除超链接 i--; } } } var mydiv = document.getElementById("div1"); if (allpagetext != null) { mydiv.innerText = allpagetext; } else { allpagetext = mydiv.innerText; } var pagesize = document.getElementById("text1").value; //看text1要每页显示的字符个数 var totalLength = allpagetext.length; //div1中总共有多少字符 if (parseInt(pagesize) > totalLength) { alert("超过总字符数，总字符才有" + totalLength + "个字符"); } else { //看有多少页数 if (totalLength % parseInt(pagesize) == 0) { pagecount = totalLength / parseInt(pagesize); } else { pagecount =Math.ceil(totalLength / parseInt(pagesize)); //如果除不尽，则用函数ceil加一页 } for (var j = 1; j <= pagecount; j++) { var afirst = document.createElement('a'); afirst.href = "javascript:nowpageindex(" + j + ")"; var atext = document.createTextNode(j); afirst.appendChild(atext); document.getElementById("doingpages").appendChild(afirst); //创建超链接显示页数 } var nowText = mydiv.innerText.substr(0, parseInt(pagesize));//默认显示第一页 mydiv.innerText = nowText; } } //当点击第几页时相应显示那一页的内容的函数代码 function nowpageindex(pageindex) { var mydiv = document.getElementById("div1"); mynowindex = pageindex; if (allpagetext != null) { mydivtext = allpagetext; } else { allpagetext = mydiv.innerText; } var mytext1 = document.getElementById("text1").value; if (mytext1 != null) { var newindex = parseInt(pageindex-1) * parseInt(mytext1); mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1)); } } //上一页代码 function jianpageindex() { if (mynowindex > 0) { mynowindex--; } var mydiv = document.getElementById("div1"); if (allpagetext != null) { mydivtext = allpagetext; } else { allpagetext = mydiv.innerText; } var mytext1 = document.getElementById("text1").value; if (mytext1 != null) { var newindex = parseInt(mynowindex - 1) * parseInt(mytext1); mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1)); } } //下一页代码 function addpageindex() { if (mynowindex < pagecount) { mynowindex++; } var mydiv = document.getElementById("div1"); if (allpagetext != null) { mydivtext = allpagetext; } else { allpagetext = mydiv.innerText; } var mytext1 = document.getElementById("text1").value; if (mytext1 != null) { var newindex = parseInt(mynowindex - 1) * parseInt(mytext1); mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1)); } } </script></head><body onload="mychar()"> <form id="form1" runat="server"> <div> <div id="firstpage"> <a href="javascript:jianpageindex()">上一页</a> </div> <div id="doingpages"> </div> <div id="lastpage"> <a href="javascript:addpageindex()">下一页</a> </div> </div> <div> <input type="text" id="text1" value="100"/> <input type="button" value="确定" onclick="mychar()" id="btnok"/> </div> <div id="div1"> 哈喽,大家好,<br /><br /> 听见傍晚，车窗外，未来有一个人在等待，<br /><br /> 如果梦想没别大海冷冷拍下，又怎么会晓得哈哈,<br /><br /> 所以愿意，舍得让你飞翔更高的地方去。<br /><br /> 也许放弃，宁静的夏天，听课，天空一片<br /><br /> 哈喽,大家好,<br /><br /> 听见傍晚，车窗外，未来有一个人在等待，<br /><br /> 如果梦想没别大海冷冷拍下，又怎么会晓得哈哈,<br /><br /> 所以愿意，舍得让你飞翔更高的地方去。<br /><br /> 也许放弃，宁静的夏天，听课，天空一片念经<br /><br /> 不是寂寞才想你，而是因为想你才寂寞，袭来的窗台，不雅天台伤怀，滴滴答答等你来<br /><br /> 泪湿的等到下一个春秋，邓蕾落下的时候，所有风景都成膜，月光轻轻，所有屋面的页，想你够不够<br /><br /> 看云水漂流，看着落叶被带走，等到下一个春秋 </div> </form></body></html>
