Javascript 如何修复文本旋转器，使其在单词列表中循环？

我试图创建一个文本旋转器，当有人刷新页面时，它会显示不同的文本

这就是我所创造的：

HTML格式如下：

<div id="t1"></div>

---

它工作正常，但选择随机，大多数情况下，它选择的第一个值是我试图使它从红色、蓝色、绿色、黄色变为黄色，然后变为红色，并一次又一次地继续循环。

您的

rand2

变量（这样做的工作是确保你回到数组的开头）永远不会被使用

您可以将计数器（表示要提取的数组项）存储在用户的中，这样它就不会在页面访问之间丢失

下面是一个示例，但请注意，由于安全限制，在堆栈溢出代码段环境中，它实际上无法工作，但您可以看到它可以工作（只需继续点击该页面上的“运行”按钮）

var scn=[“红色”、“蓝色”、“绿色”、“黄色”]；
$（函数（）{
//尝试将计数器从存储器中取出并转换回数字
var counter=+localStorage.getItem（“计数器”）；
//如果用户在创建新计数器之前未在此处
如果（！计数器）{
//初始化为随机变量
计数器=Math.floor（Math.random（）*scn.length）；
}
//如果计数器已到达数组项的末尾，请重置为0
计数器=计数器>=scn.length？0：计数器；
$（'#t1'）.text（scn[counter++]）；//显示数组中的项并推进计数器
//将计数器存储在用户的本地存储中，以便下一页加载
setItem（“计数器”，计数器）；
})；

---

对于页面加载上的旋转器功能，您不能依赖Math.random，因为它会给出任何随机数。您需要使用计数器，最重要的是为其保存一些存储空间，否则在下一页面加载时，您的计数器将一直设置为默认值。代码如下：

var scn = ['red', 'blue', 'green', 'yellow'];

$(function() {
  var currentIndex = +localStorage.getItem('index');
  if (isNaN(currentIndex) || (currentIndex === scn.length)) {
    currentIndex = 0;
  }
  $('#t1').html(scn[currentIndex]);
  localStorage.setItem('index', ++currentIndex);
});

---

这是同样的JSFIDLE：

如果你不想随机，为什么要使用随机？请使用计数器。好的，我会尝试更多地学习jscript，我认为它们会从0变为1 2 3，但不会发生这种情况：）@halfer那么有必要对此发表评论，投反对票或接近票（或以上所有投票）。但是，一个不正确的编辑总是一个不正确的编辑。约翰，对于将来的问题，请尽可能使你的标题更具体。请阅读，谢谢！当然，但是我的搭档被警告不要在标题中使用“如何”这个词，因为它看起来更像是一个请求而不是一个问题。如果它被限制为数组索引边界内的一个数字，则可以依赖一个随机数，而这正是OP所做的。这个问题有点不确定，但尽管

Math.random（）

在代码示例中使用，问题状态为当有人刷新页面时显示不同的文本。这两种解释对我来说都同样有效。@Scott但是你如何确保数字总是以循环顺序出现，如1,2,3,4,1,2，…@SachinSingh你看过我的答案了吗？随机数据只使用一次（当用户第一次访问页面时），然后存储在

localStorage

中。从那时起，该号码仅用作起始号码，并在使用和重新存储后增加。这样，你总是前进到下一个数字（或者如果你已经到达终点，则从0开始）。@SachinSingh只是为了澄清，OP不需要你获得的第一个数字是

0

，这就是随机数的来源。首先，获取数组边界内的任意随机数。从这一点开始，增加它。

var scn = ['red', 'blue', 'green', 'yellow'];

$(function() {
  var currentIndex = +localStorage.getItem('index');
  if (isNaN(currentIndex) || (currentIndex === scn.length)) {
    currentIndex = 0;
  }
  $('#t1').html(scn[currentIndex]);
  localStorage.setItem('index', ++currentIndex);
});