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>