JavaScript數字分頁效果詳解

admin發表於2018-09-07
JavaScript

更多分頁效果可以參閱分頁程式碼模組。

下面分享一個js實現的數字分頁程式碼，並詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div, ul, li, body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}
#containet {
  display: inline-block;
  border: 1px solid #e1dede;
  padding: 19px;
  margin: auto;
}
#pageMain li {
  list-style: none;
  line-height: 22px;
}
#pageBox {
  padding: 10px 0 0 0;
}
#pageBox span {
  display: inline-block;
  width: 60px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  background: #08a586;
}
#pageNav {
  display: inline-block;
}
#pageNav a {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #08a586;
  text-decoration: none;
}
#pageNav a.active,
#pageNav a:hover {
  background: #08a586;
  color: #fff;
}
</style>
<script>
window.onload = function() {
  tabPage({
    pageMain: 'pageMain',
    pageNav: 'pageNav',
    pagePrev: 'prev',
    pageNext: 'next',
    curNum: 7,
    activeClass: 'active',
    ini: 0
  });
 
  function tabPage(tabPage) {
    var pageMain = document.getElementById(tabPage.pageMain);
    var pageNav = document.getElementById(tabPage.pageNav);
    var pagePrev = document.getElementById(tabPage.pagePrev);
    var pageNext = document.getElementById(tabPage.pageNext);
 
    var curNum = tabPage.curNum;
    var len = Math.ceil(pageMain.children.length / curNum);
    var pageList = '';
    var iNum = 0;
 
    for (var index = 0; index < len; index++) {
      pageList += '<a href="javascript:;">' + (index + 1) + '</a>';
    }
    pageNav.innerHTML = pageList;
 
    pageNav.children[0].className = tabPage.activeClass;
 
    for (var index = 0; index < pageNav.children.length; index++) {
      pageNav.children[index].index = index;
      pageNav.children[index].onclick = function() {
        for (var t = 0; t < pageNav.children.length; t++) {
          pageNav.children[t].className = '';
        }
        this.className = tabPage.activeClass;
        iNum = this.index;
        ini(iNum);
      };
    }
 
 
    //下一頁
    pageNext.onclick = function() {
      if (iNum == len - 1) {
        alert('已經是最後一頁');
        return false;
      } else {
        for (var t = 0; t < pageNav.children.length; t++) {
          pageNav.children[t].className = '';
        }
        iNum++;
        pageNav.children[iNum].className = tabPage.activeClass;
        ini(iNum);
      }
    };
 
    //上一頁
    pagePrev.onclick = function() {
      if (iNum == 0) {
        alert('當前是第一頁');
        return false;
      } else {
        for (var t = 0; t < pageNav.children.length; t++) {
          pageNav.children[t].className = '';
        }
        iNum--;
        pageNav.children[iNum].className = tabPage.activeClass;
        ini(iNum);
      }
    };
 
    function ini(iNum) {
      for (var index = 0; index < pageMain.children.length; index++) {
        pageMain.children[index].style.display = 'none';
      }
 
      for (var index = 0; index < curNum; index++) {
        if (pageMain.children[(iNum * curNum + index)] == undefined) {
          break;
        }
        pageMain.children[(iNum * curNum + index)].style.display = 'block';
      }
    }
    ini(iNum);
  }
};
</script>
</head>
<body>
  <div id="containet">
    <ul id="pageMain">
      <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>
      <li>螞蟻部落歡迎您 第11條</li>
      <li>螞蟻部落歡迎您 第12條</li>
      <li>螞蟻部落歡迎您 第13條</li>
      <li>螞蟻部落歡迎您 第14條</li>
      <li>螞蟻部落歡迎您 第15條</li>
      <li>螞蟻部落歡迎您 第16條</li>
      <li>螞蟻部落歡迎您 第17條</li>
      <li>螞蟻部落歡迎您 第18條</li>
      <li>螞蟻部落歡迎您 第19條</li>
      <li>螞蟻部落歡迎您 第20條</li>
      <li>螞蟻部落歡迎您 第21條</li>
      <li>螞蟻部落歡迎您 第22條</li>
      <li>螞蟻部落歡迎您 第23條</li>
      <li>螞蟻部落歡迎您 第24條</li>
      <li>螞蟻部落歡迎您 第25條</li>
      <li>螞蟻部落歡迎您 第26條</li>
      <li>螞蟻部落歡迎您 第27條</li>
      <li>螞蟻部落歡迎您 第28條</li>
      <li>螞蟻部落歡迎您 第29條</li>
      <li>螞蟻部落歡迎您 第30條</li>
    </ul>
    <div id="pageBox">
      <span id="prev">上一頁</span>
      <ul id="pageNav"></ul>
      <span id="next">下一頁</span>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function() {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.tabPage({

  pageMain: 'pageMain',

  pageNav: 'pageNav',

  pagePrev: 'prev',

  pageNext: 'next',

  curNum: 7,

  activeClass: 'active',

  ini: 0

})

為tabpage()方法傳遞一個配置物件。

pageMain規定內容容器的id屬性值;pageNav分頁容器的id屬性值；

pagePrev規定上一頁按鈕的id屬性值;pageNext下一頁按鈕的id屬性值；curNum規定每一頁的內容數目。

activeClass規定當前頁面數字按鈕的樣式類。

（3）.function tabPage(tabPage) {},此方法實現了分頁功能，引數是一個配置物件。

（4）.var pageMain = document.getElementById(tabPage.pageMain);

var pageNav = document.getElementById(tabPage.pageNav);

var pagePrev = document.getElementById(tabPage.pagePrev);

var pageNext = document.getElementById(tabPage.pageNext);

獲取對應id屬性值的元素物件。

（5）.var curNum = tabPage.curNum，將每一頁的數目賦值給變數curNum。

（6）.var len = Math.ceil(pageMain.children.length / curNum)，計算出有多少頁，進行上舍入操作。

（7）.var pageList = ''，分頁字串。

（8）.var iNum = 0，宣告一個變數並賦值為0，後面用到。

（9）.for (var index = 0; index < len; index++) {

  pageList += '<a href="javascript:;">' + (index + 1) + '</a>';

}，生成分頁字串，也就是1、2、3等分頁字串。

（10）.pageNav.innerHTML = pageList，將字串寫入對應容器。

（11）.pageNav.children[0].className = tabPage.activeClass，設定預設第一頁為綠色狀態。

（12）.for (var index = 0; index < pageNav.children.length; index++) {},通過for迴圈批量註冊事件處理函式。

（13）.pageNav.children[index].index = index，為當前數字頁按鈕元素自頂一個index屬性並賦值為當前索引值。

（14）.pageNav.children[index].onclick = function() {}，為當前數字按鈕註冊onclick事件處理函式。

（15）.for (var t = 0; t < pageNav.children.length; t++) {

  pageNav.children[t].className = '';

}，清空所以數字按鈕的樣式類，也就是首先將所有的按鈕綠色去掉。

（16）.this.className = tabPage.activeClass，然後將當前點選的數字按鈕設定為背景綠色。

（17）.iNum = this.index，將索引值賦值給變數iNum。

（18）.ini(iNum)，顯示對應頁的內容。

（19）.pageNext.onclick = function() {}，為按鈕註冊事件處理函式，點選可以顯示下一頁。

（20）.if (iNum == len - 1) {

  alert('已經是最後一頁');

  return false;

},如果iNum等於len-1，那麼說明已經是最後一頁了，那麼就彈出提示，並且跳出函式。

（21）.else {

  for (var t = 0; t < pageNav.children.length; t++) {

    pageNav.children[t].className = '';

  }

  iNum++;

  pageNav.children[iNum].className = tabPage.activeClass;

  ini(iNum);

}，首先清空所有按鈕的綠色背景。

然後inum加1，然後呼叫ini()函式進入下一頁內容。

（22）.function ini(iNum) {}，顯示對應頁次的內容，引數是對應的頁次索引（從0開始的）。

（23）.for (var index = 0; index < pageMain.children.length; index++) {

  pageMain.children[index].style.display = 'none';

}，首先隱藏所有的內容。

（24）.for (var index = 0; index < curNum; index++) {

  if (pageMain.children[(iNum * curNum + index)] == undefined) {

    break;

  }

  pageMain.children[(iNum * curNum + index)].style.display = 'block';

}，通過for迴圈顯示對應頁次的內容。

break的作用是當沒有指定索引的內容的時候，就直接跳出for迴圈，所以已經沒有再多的內容頁。

比如最後一頁，只有兩個內容，迴圈玩兩次以後，就可以結束迴圈了。

二.相關閱讀:

（1）.children屬性可以參閱javascript children一章節。

（2）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（3）.className可以參閱js className一章節。

（4）.break可以參閱javascript break與continue一章節。

相關文章