Question

我尝试循环浏览5个链接并希望在每个页面加载时循环显示它们（即第一个访问者页面加载显示链接1，第二个访问者页面加载显示链接2等，然后返回链接1链接5后显示）

我发现下面的代码随机循环链接，但我试图让它们按顺序加载。这可能吗？在此先感谢您的帮助。

<li id="RotateLink"></li>

<script language="javascript">
var links = new Array("link1", "link2", "link3", "link4", "link5");
var randomnumber=Math.floor(Math.random()*5)
document.getElementById("RotateLink").innerHTML = links[randomnumber];
</script>

（另外，关于更改＆＃34; link1＆＃34;以及实际链接的一些提示也会有所帮助）

Answer 1

由于您在页面加载时丢失了JS上下文，因此您可以使用浏览器内置的localStorage api（https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage）。

<li id="RotateLink"></li>

<script language="javascript">
  var links = new Array("link1", "link2", "link3", "link4", "link5");
  var numberFromStorage = localStorage.getItem("cycle-link-number") || "0"; // zero if getItem returns null
  var number = parseInt(numberFromStorage); //cast to number since storage saves strings
  number = number >= links.length ? 0 : number; // reset if reached max
  localStorage.setItem("cycle-link-number", number + 1); //set item for next iteration
  document.getElementById("RotateLink").innerHTML = links[number];
</script>

要创建链接，您可以执行以下操作：

// instead of
// document.getElementById("RotateLink").innerHTML = links[number];
// do
var link = document.createElement("a"); // creates anchor element
link.href = 'someUrl'; // sets the url, e.g link.href = 'http://www.google.de';
link.innerHTML = 'linktext'; // set the link text
document.getElementById("RotateLink").appendChild(link); // appends the link to the element with the id "RotateLink"

Answer 2

由于您需要知道页面重新加载之前加载的链接，您需要将该信息存储在某个位置，以便在下次重新加载时使用它。我们有浏览器本地存储来做到这一点。您可以存储先前加载的链接的索引，并根据该链接增加链接。有关HTML5 Web存储的更多详细信息，请here

<li id="RotateLink"></li>

<script language="javascript">

var links = new Array("link1", "link2", "link3", "link4", "link5");

var currentIndex=localStorage.currentIndex;
if(currentIndex){
   if(currentIndex < links.length-1)
     currentIndex = parseInt(currentIndex)+1;
   else
     currentIndex = 0;
 } else {
     currentIndex = 0;
     localStorage.setItem('currentIndex', currentIndex);
 }
localStorage.currentIndex = currentIndex;
document.getElementById("RotateLink").innerHTML = links[currentIndex];

</script>

如何循环链接（按顺序）每页加载

2 个答案: