JavaScript-頁數模擬

上了六角學院筆記已經上到Event,還是會很想要看一下後面章節,看到老師給的作業要抓取Json格式資料要做成頁數。 還是有一直的嘗試有什麼方法能將頁數做出來,假日的時間和朋友一起學習JavaScript在吃晚餐的時候和朋友講述自己在做的頁數。 第一頁為1~6筆、第二頁為7~12筆、第三頁13~18筆,讓我有些靈感不斷的想全域變數去控制for迴圈之後真的成功了 只是一個模擬,希望後面能做出來完整的Json格式的頁數。

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

var content = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18'];
var el = document.querySelector('.str');//頁數父元素
var el1 = document.querySelector('.str1');//筆數父元素
var contentLen = content.length;
var pages =contentLen/6;//頁數生成六筆為一頁
var str ='';//頁數字串
var str1 ='';//筆數字串
var contentMin = 0;
var contentMax = 6;
var contentTall =3;//可透過修改頁數去模擬點擊頁數之後會用event的方法去做
if(contentTall){//點擊模擬更改全域變數
  contentMax*= contentTall;//最大
  contentMin = contentMax-6;//最小
}
//利用全域變數控制for迴圈印出每一頁筆數的資料
for(var j=contentMin; j<contentMax; j++){
  var a1 = '<a>'+content[j]+'</a>';
  str1 +=a1;
  el1.innerHTML=str1;
}
//利用for迴圈印出每六筆為一頁
for(var i = 1; i<=pages; i++){
  var a = '<a href="#">'+i+'</a>';
  str += a +'<br>';
  el.innerHTML = str;
}

codepen