渐变效果版本

Question

我试图制作一个文本元素数组，以每X秒显示一次。例如，将显示“ Hello”，然后X秒钟后，文本将更改并显示“我2岁。

我正在抓取一个DOM元素，并使用.innerHTML来更改在javascript中创建的对话框数组元素的文本。我对代码进行了麻烦处理，似乎setTimeout无法正常工作，因为它没有每隔X秒就显示每个数组元素（我等待5秒钟）。我相信这就是为什么我只显示最后一个元素而不是看到每个显示X秒数的原因。有人可以帮我吗？我对编码也很陌生。

谢谢。

同样，如果您能在每次更改文本时帮助我创造出使文本元素渐入淡出的效果，那将是很棒的。

var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];

function changeText() {

  var timer = 0;

  for (var i = 0; i < dialog.length; i++) {

    setTimeout(document.getElementById('h1').innerHTML = dialog[i], timer);

    timer = timer + 5000;


  }

}

changeText();

<div id="h1">Hello</div>

Answer 1

首先，您没有正确使用var函数。更正的版本是。

let应该转换为var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog']; function changeText() { var timer = 0; // Use let instead of var for (let i = 0; i < dialog.length; i++) { setTimeout(() => { document.getElementById('h1').innerHTML = dialog[i]; }, timer); timer = timer + 5000; } } changeText();。 Read why?

<div id="h1">Hello</div>

setInterval()

最好使用setTimeout而不是let elem = document.getElementById('h1');。另外，不要每次都调用计时器时立即初始化var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog']; let displayIndex = 0; let elem = document.getElementById('h1'); let delay = 1000; // 1 second delay setInterval(() => { if (elem) { elem.innerHTML = dialog[displayIndex]; } // Move to the next item in dialog displayIndex++; // If display index goes out of index range, start again if (displayIndex >= dialog.length) { displayIndex = 0; } }, delay);。

<div id="h1"></div>

let displayIndex = 0;
let elems = $('#h1 > span');
let delay = 1000;

setInterval(() => {
  
  elems.removeClass();
  elems.addClass('hidden');
  
  // Move to the next item in dialog
  displayIndex++;
  
  // If display index goes out of index range, start again
  if (displayIndex >= elems.length) {
    displayIndex = 0;
  }
  
  $(elems[displayIndex]).addClass('visible');
}, delay);

渐变效果版本

要获得渐变效果，您需要相应地更改html结构和javascript。

#h1 {
  position: relative;
}

#h1 span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  transition-delay: 0s;
}

span.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

span.hidden {
  opacity: 0;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="h1">
  <span class="visible">Hello,</span>
  <span class="hidden">My name is James</span>
  <span class="hidden">I am 2 years old.</span>
  <span class="hidden">I have a dog</span>
</div>

<changeSet id="1" author="me" >
         <sqlFile dbms="mysql"
            path="insert_my_data.sql"
            relativeToChangelogFile="true"
            splitStatements="true"
            stripComments="true"
            endDelimiter="EOF" />
    </changeSet>

Answer 2

setTimeout接受回调，而不是简单的代码语句-而是将其传递给函数。还可以使用let而不是var，以便每次迭代都为i设置一个单独的绑定：

var dialog = ['Hello,', 'My name is James', 'I am 2 years old.', 'I have a dog'];

function changeText() {
  var timer = 0;
  for (let i = 0; i < dialog.length; i++) {
    setTimeout(() => document.getElementById('h1').innerHTML = dialog[i], timer);
    timer = timer + 1000;
  }
}

changeText();

<div id="h1">Hello</div>

Answer 3

检查文档是否有setTimeout。第一个参数必须是匿名函数或函数。尝试将setTimeout中的第一个参数包装在'function（）{}'中。

遍历元素数组以每X秒在浏览器上显示

3 个答案:

渐变效果版本