js li 分頁

時間:2021/3/24 11:39:42,點擊:0


<ul id="all">
    <li>第1集</li>
    <li>第2集</li>
    <li>第3集</li>
    <li>第4集</li>
    <li>第5集</li>
    <li>第6集</li>
    <li>第7集</li>
    <li>第8集</li>
    <li>第9集</li>
    <li>第10集</li>                
</ul>
<div class="page">第<span id="a2"></span>/<span id="a1"></span>頁<span id="a3"></span> <a href="#" onClick="change(--pageno)">上一頁</a><a href="#" onClick="change(++pageno)">下一頁</a></div>
<script>
  var a = document.getElementById("all").getElementsByTagName("li");
  var zz =new Array(a.length);
  for(var i=0;i <a.length;i++){
    zz[i]=a[i].innerHTML;
    } //div的字符串數組付給zz
  var pageno=1 ;              //當前頁
  var pagesize=5;            //每頁多少條信息
  if(zz.length%pagesize==0){
    var  pageall =zz.length/pagesize ;
  }else{
    var  pageall =parseInt(zz.length/pagesize)+1;  
  }   //一共多少頁    
  
  function change(e){
    pageno=e;
    if(e<1){ //如果輸入頁<1頁
      e=1;pageno=1;//就等于第1頁 , 當前頁為1
    }
      if(e>pageall){  //如果輸入頁大于最大頁
      e=pageall;pageno=pageall; //輸入頁和當前頁都=最大頁
    }
    document.getElementById("all").innerHTML=""//全部清空
      for(var i=0;i<pagesize;i++){
        var div =document.createElement("li")//建立div對象
        div.innerHTML=zz[(e-1)*pagesize+i]//建立顯示元素
        document.getElementById("all").appendChild(div)//加入all中
        if(zz[(e-1)*pagesize+i+1]==null) break;//超出范圍跳出
          }
    var ye="";
    for(var j=1;j<=pageall;j++){
      if(e==j){
        ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "
      }else{
        ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "
      }
    }
    document.getElementById("a1").innerHTML=pageall;
    document.getElementById("a2").innerHTML=pageno;
    document.getElementById("a3").innerHTML=ye;
  }
  change(1);
</script>

打印 | 關閉

国产亚洲日韩欧美视频_免费国产久久拍久久爱