使用JavaScript的文本更改动画

问题描述

我正在尝试每3秒创建一个更改文本。但它似乎只运行一次，然后停止执行任何操作。我的代码：

HTML

<div class="output">
  <h2>True Multi-Purpose Theme for
     <span class="changingtext">Business</span> 
     and More
   </h2>
</div>

JavaScript

let newText = document.querySelector('.changingtext')

setInterval(function() {
  if (newText.innerHTML = 'Business'){
    newText.innerHTML = 'Agencies';
  }
  else if (newText.innerHTML = "Agencies"){
    newText.innerHTML = 'Startups';
  }
  else {
    newText.innerHTML = 'Business';
  }
},3000)

解决方法

问题是您在x < y

中使用的是分配而不是比较

错误

x <= y

正确

if

 if(newText.innerHTML = 'Business'){

 if (newText.innerHTML === 'Business') {

此外，以下可能会更好：

let newText = document.querySelector('.changingtext')

setInterval(function() {
  if (newText.innerHTML === 'Business') {
    newText.innerHTML = 'Agencies';
  } else if (newText.innerHTML === "Agencies") {
    newText.innerHTML = 'Startups'
  } else {
    newText.innerHTML = 'Business'
  }

},3000)

<div class="output">
  <h2>True Multi-Purpose Theme
    <be>
      for
      <span class="changingtext">Business</span> and More
  </h2>
</div>

您可以通过以下方式再次对其进行改进：

创建一个实用程序功能，该功能将独立运行，以获取选择器，更改文本和从其循环的文本列表之间的时间

javascript loops