JavaScript-頁數總結

不斷的測試到現在都天亮了，舒服...
其實就3個重點:
 1.利用for迴圈生成頁數，以陣列的長度除以6。因為6筆為1頁，再將這個6筆為1頁以for迴圈來跑。假設總共有18筆內容，再將18除以6宣告為頁數的變數，再以for迴圈1跑到3。

2.初始筆數內容就比較簡單，以for迴圈0跑到6。

3.跟前面寫的JavaScript-頁數模擬利用全域變數來控制迴圈有點類似，但是在這裡以監聽點擊頁數事件來進行。以偵測內容來進行判斷。

<div class="container_page"></div>//生成的頁碼
<div class="container_content"></div>//6筆資料

.str{
  width: 70px;
}
a{
  padding: 0 8px;
}
em{
  margin: 50px 50px;
}

var content = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18'];
var container_page = document.querySelector('.container_page');//頁數父元素
var container_content = document.querySelector('.container_content');//筆數父元素
var contentLen = content.length;//陣列長度
 
var pages =contentLen/6;//頁數生成六筆為一頁
var page_str ='';//頁數字串
 
var start_content_str ='';//初始筆數字串
 
 
//利用for迴圈印出每六筆為一頁數
for(var i = 1; i<=pages; i++){
   var a = '<a href="#">'+i+'</a>';
   page_str +=a;
   container_page.innerHTML=page_str;
}
 
 
//初始6筆資料
for(var i=0; i<6; i++)
{  
   var em = '<em>'+content[i]+'</em>';
   start_content_str +=em;
   container_content.innerHTML=start_content_str;
}
 
 
//點級頁數事件
container_page.addEventListener('click',function(e){
  var content_str ='';//筆數字串
  var content_Min=0;
  var content_Max= 6;
  var button_page = e.target.innerText;//點擊偵測內容
 
  if(button_page)//假設button_page等於2時
  {//點擊後更改變數
    content_Max*= button_page;//當button_page為2，6*2=12
    content_Min = content_Max-6;//當content_Max為12，12-6=6
  } 
  //第6筆到第12筆迴圈
  for(var i=content_Min; i<content_Max; i++)
  {
    var em = '<em>'+content[i]+'</em>';
    content_str +=em;
    container_content.innerHTML=content_str;
  }
    content_Max =6;
    content_Min =0;
});

codepen