Question

我正在尝试创建一个每5秒更改一次的html标题，通过一个包含多个项目和循环的数组。我可以让一切工作，除了每隔五秒钟后文本发生变化。现在，它立即从数组中的第一项到最后一项。我已经尝试过使用setTimeOut和setInterval，但到目前为止还没有运气。我也在网上到处搜索。

这是我到目前为止所没有的setTimeOut / setInterval部分，因为它不起作用：

var headingChange = {

  heading: function() {
      var headings = ['Hello', 'Hi', 'Ye'];
      for (var i = 0; i < headings.length; i++) {
        document.getElementById('heading').innerHTML = headings[i];
      }
   }
};

这是一个简单的方法（+ html）。

https://jsfiddle.net/countermb/w9qwk6ch/

希望有人可以帮助我（我是Javascript的新手）。提前谢谢。

Answer 1

此代码段可能会对您有所帮助。

您可能需要使用setInterval来更改标题。

var headings = ['Hello', 'Hi', 'Ye'];
var i = 0;
var intervalId = setInterval(function() {
  document.getElementById('heading').innerHTML = headings[i];
  if (i == (headings.length - 1)) {
    i = 0;
    //you can even clear interval here to make heading stay as last one in array
    //cleanInterval(intervalId);

  } else {
    i++;
  }
}, 4000)

<h1 id="heading">Change this!</h1>

Answer 2

您可以使用setInterval每n毫秒运行一次功能。还更新了剪切以仅增加索引（或返回0），而不是使用for循环遍历数组。

var headingChange = {
  currentHeader: 0,
  headings: ['Hello', 'Hi', 'Ye'],
  heading: function() {
    document.getElementById('heading').innerHTML = this.headings[this.currentHeader];
    if (this.currentHeader === this.headings.length - 1) {
      this.currentHeader = 0;
    } else {
      this.currentHeader = this.currentHeader + 1;
    }
  } 
};

setInterval(function(){
  headingChange.heading();
}, 5000)

使用数组和循环每隔几秒更改一个标题

2 个答案: