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

我試圖重新創建類似於https://www.sketchapp.com/的東西，在頁面中途文本會自動更改（草圖適用於UX設計師，如）。我已經查了一下，但找不到如何做出這樣的事情。這就是我所得到的，如果誰能幫助我，那真是太棒了，謝謝！HTML/CSS/JS - 如何使用setInterval更改文本？

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>

來源

2016-11-20 ZanicL3

我想，而不是附加的事件domcontentloaded，你可以用你的setInterval中的window.onload，並考慮使用requestanimationframe代替setInterval的 – Geeky

@Geeky無論您的建議的回答這個問題。 – Brad

@LucasDebelder您的代碼正在工作。有什麼問題？ – Brad

這個怎麼樣的解決方案。希望能幫助到你！

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

來源

2016-11-20 08:07:00 HenryDev

謝謝，這應該做一些小的調整！：D – ZanicL3

@LucasDebelder不客氣！我只是做了一個顏色的快速更新:) – HenryDev

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

回答

相關問題