简易JS分页插件-优快云博客

本文链接：https://blog.youkuaiyun.com/zzqkillyou/article/details/5653744

今天花了点时间写了个简单的js分页，功能很简单，一次可以翻指定的页数，跳到指

定页，就这些，用到分页的时候，可以简单的改改就可以了，再加其它的功能叶很简便，

不需要临时再花时间再去思考了...

<script>
var totalNum;
var cuPage=1;
var totalpage;

function settotalnum(evt){
var evt=evt?evt:(window.event?window.event:null);
if (evt.keyCode!=13){return;}

var value = document.getElementById('input1').value-'0';
if(!/^[0-9]*$/i.test(value)){alert('Invade input!');return;}
totalNum=value;
init();
}

function goToThis(evt){
var evt=evt?evt:(window.event?window.event:null);
if (evt.keyCode!=13){return;}

var value = document.getElementById('input2').value-'0';
if(!/^[0-9]*$/i.test(value)){alert('Invade input!');return;}

cuPage = parseInt((value-1)/5)+1;
var pre = document.getElementById('pre');
pre.title = cuPage-1;
var next = document.getElementById('next');
next.title =parseInt(cuPage)+1;
init();
showThisRound(value);

}

function init(){
//totalNum= document.getElementById('input2').value-'0';
totalpage = parseInt(totalNum/5)+1;
var pre = document.getElementById('pre');
var prenum =0;
var next = document.getElementById('next');
var nextnum =2;
pre.οnclick=function(){
if(this.title==0){
   cuPage=1;
   alert('到最前了');return;
}else{
    cuPage = this.title;
    this.title = cuPage-1;
    next.title = parseInt(cuPage)+1;
    initPage(cuPage,totalNum);
}
}

next.οnclick=function(){
if(this.title==parseInt(totalpage)+1){
   if(totalpage%5==0){
     cuPage=totalpage-1;
   }else{
   cuPage=totalpage;
   alert('到最后了');return;
   }

}else{
    cuPage = parseInt(this.title);
    pre.title = cuPage-1;
    this.title = parseInt(cuPage)+1;
    initPage(cuPage,totalNum);
}
}

initPage(cuPage,totalNum);
}

function initPage(cuPage,totalNum){
document.getElementById('initnum').innerHTML="";
var st = (cuPage-1)*5+1;
var inner="";
for(var i =st,j=1;i<=totalNum;i++,j++){
inner+="<a href='javascript:;' onclick =showThisRound('"+i+"')

>"+i+"</a>     ";
if(j==5)break;
}
document.getElementById('initnum').innerHTML=inner;
showThisRound(st);

}

function showThisRound(st){

document.getElementById('showinfo').innerHTML="当前是第<font color =

'red'>"+st+"</font>页";
}
</script>

<body οnlοad="init();">
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" >
      <tr>
        <td id="showinfo" align="center"></td>
      </tr>
      <tr>
        <td width="400" height="34" align="center" id ="showRoundPage">
        <a href="javascript:;" id ="pre" title="0">Pre</a>
        <span id ="initnum" style="margin: 0px;"></span>
        <a href="javascript:;" id ="next" title="2">Next</a>
        </td>
        <td width="150">设置总页数:<input type = "text" align="left" size = "4"

id = "input1" οnkeydοwn="settotalnum(event)"/></td>
        <td width="150">跳到第:<input type = "text" align="left" size = "4" id

= "input2" οnkeydοwn="goToThis(event)"/>页</td>
      </tr>
    </table>

</body>

js简单分页