HTML/CSS/JS - どのように私はしたsetIntervalを使用してテキストを変更できますか？

Question

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>

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>