數組中特定位置的html頁面

Question

我正在處理這個項目，我將多個HTML頁面保存在一個數組中。 每次用戶在一頁上完成其任務后，數組會自動洗牌並在其中加載其余HTML頁面並為用戶顯示。

var getPages = localStorage.getItem("htmlPages");

if (document.title === "INDEX" || !getPages) {
  var htmlPages = [
    "page1.html",
    "page2.html",
    "page3.html",
    "page4.html",
    "page5.html",
    "page6.html",
    "page7.html",
    "page8.html",
    "page9.html",
    "page10.html"
  ];
  console.log('initializing html pages BEGIN');
  var jsonhtmlPages = JSON.stringify(htmlPages);
  window.localStorage.setItem("htmlPages", jsonhtmlPages);
  console.log('initializing html pages END');
} else {
  console.log('filling html pages');
  var htmlPages = JSON.parse(getPages);
}

function RandomPages() {
  shuffle(htmlPages);
  if (htmlPages.length > 0) {
    window.location.href = htmlPages[0];
  } else {
    console.log("tasks completed");
    alert('ALL PAGES ARE DONE');
  }
  console.log(htmlPages.shift());
  console.log(htmlPages);
  var jsonPool = JSON.stringify(htmlPages);
  window.localStorage.setItem("htmlPages", jsonPool);
  console.log(htmlPages);
}

上面的方法工作正常，但是現在我想在用戶訪問的每3頁之后添加一個break.html頁。 我用了

htmlPages.splice(3, 0, "Break.html");

但這不是正確的解決方案，或者如果在哪里添加呢？ 因為數組隨機播放，所以break.html不會保留其位置。 任何幫助，將不勝感激，謝謝

Answer 1

我將在每次調用RandomPages都增加一個計數器，例如pageViews++ 。 這應該在RandomPages方法之外定義，這樣就不會在每次調用時都將其重置。

然后，在您檢查if (htmlPages.length > 0)我將添加另一項檢查

if (pageViews % 3 === 0) { 
  /* show break page and return/don't execute the next if check */ 
}