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

我正在尝试重新创建类似您在https://www.sketchapp.com/上看到的内容，在页面中间，文本会自动更改（为像您这样的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>

最佳答案

这个解决方案怎么样。希望能帮助到你！

$(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>

关于javascript - HTML/CSS/JS-如何使用setInterval更改文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40701862/