长文章分页显示

今天上级要求实现对长文章的分段显示，在网上找了些代码下来不是运行不了就是不会自己的要求。所以最后还是自己写。对长文章的分页时，如果都是字符而没有html标记的话，可以通过统计字符的个数来分页，但实际上我们后台中一般都用一些编辑器，几乎都带有html标记，所以只好用JavaScript中的split函数利用一些特殊的字符来分页，例如在后台添加文字时，在想要分段的位置添加“@@@”作为分段标记，用这种方法不会打断到html标记，除非你是故意的，废话少说，具体代码和解释如下所示。


<%
‘rs("content")从数据库拿出来的内容，把影响的符号替换掉。
‘双引号影响字符串，把字符串切断而不能正常输入整段，所以要替换
‘回车键也会影响代码的正常运行。不信你自己试试
news=Replace(Replace(rs("content"),"""","'"),vbCrLf," ")
%>

<!--内容开始(客户端方式)-->
<script language="javascript">
<!--
//内容分段保存在数组中
var content = new Array();
var pageTotal = 1;
var noMsg = "";
function initContent(){
if(document.getElementById){
//内容分段保存在数组中。content[0]为开始，以@@@
//为分组条件
content = "<%=news%>".split("@@@");
//数组的大小就是页数的大小
pageTotal = content.length;
//默认把第一页输出
document.getElementById("newsContent").innerHTML=content[0];
for(i=1;i<=pageTotal;i++){
if(i==1){
noMsg="<span id=\"a"+i+"\" style=\"color:#FF0000\">"+i+"</span>";
}else{
noMsg=noMsg+" " + "<span id=\"a"+i+"\" onClick=\"getContent("+i+")\" onMouseOver=\"comein('a"+i+"')\" onmouseout=\"getout('a"+i+"')\">"+i+"</span>";
}
}
document.getElementById("no").innerHTML=noMsg;
}
}
//打开页面时自动加载运行函数
window.onload=initContent;

//点击数字时显示对应的页
function getContent(noID){
noMsg="";
n = noID - 1;
document.getElementById("newsContent").innerHTML=content
;
for(i=1;i<=pageTotal;i++){
if(i==noID){
noMsg=noMsg+" "+"<span id=\"a"+i+"\" style=\"color:#FF0000\">"+i+"</span>";
}else{
noMsg=noMsg+" "+"<span id=\"a"+i+"\" onClick=\"getContent("+i+")\" onMouseOver=\"comein('a"+i+"')\" onmouseout=\"getout('a"+i+"')\">"+i+"</span>";
}
}
document.getElementById("no").innerHTML=noMsg;
}

function comein(noid) {
//鼠标在数字上变成手型
document.getElementById(noid).style.cursor="hand";
//alert(noid+"in");
}
function getout(noid) {
//鼠标离开数字变回默认
//alert(noid+"out");
document.getElementById(noid).style.cursor="default";
}
-->
</script>
<!--内容结束-->

<div id="newsContent"><!--内容的显示--></div>
<div id="no" align="right"><!--页面编号--></div>

显示结果：图片一



图片二：


本文出自 “IT新人类<-->软..” 博客，请务必保留此出处http://ccp330.blog.51cto.com/254121/180437