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更改文本？

回答

相关问题