用js处理输出分页(完美版)

最新推荐文章于 2021-06-05 05:54:10 发布

必败客

最新推荐文章于 2021-06-05 05:54:10 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： tts javascript function input button div

本文链接：https://blog.csdn.net/yangm1203/article/details/1716354

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

这篇博客演示如何使用JavaScript从包含多个``分隔符的文本区域内容中创建分页效果。通过遍历内容，将每个分隔符之间的文本段落放入单独的`div`元素中，并提供了显示、隐藏页面的功能，以及输入页码跳转的文本框和按钮，实现了完整的分页功能。

摘要由CSDN通过智能技术生成

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<textarea name="" cols="" rows="" id="conpage" style="display:none;">

你好

我好

他也好

全都好

</textarea>
<script language="javascript">
var zhenze = /[^0-9]/;//创建正则,表明非数字字符串
var thispage = document.getElementById("conpage").value;//取得内容
var page_amount,x;
page_amount = thispage.split('').length;
page_amount--;//内容里的$pages$个数
var asarray = new Array();//数组
var v=0;
for(var t=0;t<page_amount;t++){
asarray[t] = thispage.indexOf("",v);//记录每个$pages$的位置
v=asarray[t];
v++;
};
page_amount--;
for(var s=0;s<page_amount;s++){
//以下是分段写出所有内容
document.write('<div id="pg'+(s+1)+'" style="block">');
document.write(thispage.substring(asarray[s],asarray[s+1]));
document.write('</div>');
alert(s+1);
};

var obj,objt;
var s_a_d = 1;//记录当前显示的页数id,默认为第1页显示，当设用showpage时，此变量用于记录上次所显示的页码，
function hidpage(hidt){//此函数用于隐藏页数
obj=eval("document.getElementById('pg"+hidt+"')");
obj.style.display = "none";
                       };

function showpage(sow){//此函数用于显示页数
obj = eval("document.getElementById('pg"+sow+"')");
objt = eval("document.getElementById('pg"+(s_a_d)+"')");//此句是取得上次显示的页码
objt.style.display = "none";//先隐藏上次显示的页码
obj.style.display = "block";//再显示当前用户需要显示的页码
s_a_d = sow;
document.getElementById("pageamo").value = sow;
alert("当前显示第"+s_a_d+"页");
                       };

var tts;
function goto(){ //页面转向函数,作用是用户在文本框里输入页码然后转向
tts = document.getElementById("inputpage").value;
if(!tts.match(zhenze)==""){
alert("错误，你输入了非数字类型字符");
return;
};
if(tts>page_amount || tts < 1){
alert("无此页");//非法输入全部检验完毕
                               }else{
showpage(tts);//合法的执行转向
                                      };
};

document.write('<div>');
document.write('你现在在第<input type="button" id="pageamo" value="'+s_a_d+'" style="font-size:12px;height:18px;background-color:#FFFFFF; color:red;font-weight:bold;border:#FFFFFF 0px solid;">页 ');//标示当前页码
document.write('共有'+page_amount+'页');//总页数
for(var k=0;k<page_amount;k++){
document.write(' <a href="javascript:showpage('+(k+1)+')" style="text-decoration:none;">');
document.write(" ["+(k+1)+"] ");
document.write('</a> ');
hidpage(k+1);//隐藏所有页数
                                };//for写出页码 : 1 2 3 4 5 ....
showpage(1);//首先显示第一页内容
document.write(' 转到第 <input type="text" id="inputpage" style="width:20px;font-size:12px;height:18px;" value=""> 页 ');//转向表单
document.write('<input type="button" value=" Go " οnclick="goto()" style="height:20px;">');
document.write('</div>');
</script>
</body>
</html>