HTML/CSS/JS - 如何使用 setInterval 更改文本？

Question

我正在尝试重新创建您在 https://www.sketchapp.com/ 上看到的内容，在页面中途文本会自动更改（Sketch 是为像您这样的 UX 设计师制作的）。我搜索了一下，但找不到确切的方法来制作这样的东西。这就是我得到的，如果有人可以帮助我，那就太棒了，谢谢！

document.addEventListener('DOMContentLoaded', function(){
  setTimeout(function(){
    var div = document.getElementById('js-text');
    div.innerHTML = "Replaced <span class='redText'>Text</span>";
  }, 1000);
});

.redText{
  color: red;
}

<div id="js-text">Initial Text</div>

Answer 1

这个解决方案怎么样。希望对您有所帮助！

$(document).ready(function(){
  $("#test").html("<div>"+ 'Sketch is made for UI designers like you'+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0);
   var str = "";
   var number = 1;
   var timer = setInterval(function() {
    if(number == 0){str = "Sketch is made for" +'<span class = "myClass"> UI </span>' + "designers like you"}
     if(number == 1){str = "Sketch is made for" +'<span class = "myClass"> UX </span>' + "designers like you"}
     else if(number == 2){str = "Sketch is made for"+'<span class = "myClass"> web designers </span>'+ "like you"}
     else if(number == 3){str = "Sketch is made for" + '<span class = "myClass"> mobile designers </span>'+ "like you"} 
     $("#test").html("<div>"+ str+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0);
     ++number;
     if(number == 4){
        number = 0;
     }
    }, 2000); 
});

.myClass{
  background: purple;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "test">
</div>