Question

我尝试重新创建您在https://www.sketchapp.com/上可以看到的内容，在页面中间文本会自动更改（ Sketch是为像您这样的UX设计师制作的）。我搜索了一下，但无法确切地找到如何做出类似的东西。这就是我得到的，如果有人可以帮助我，那将是非常棒的，谢谢！

＆＃13;

document.addEventListener('DOMContentLoaded', function(){
  setTimeout(function(){
    var div = document.getElementById('js-text');
    div.innerHTML = "Replaced <span class='redText'>Text</span>";
  }, 1000);
});

＆＃13;

.redText{
  color: red;
}

＆＃13;

<div id="js-text">Initial Text</div>

＆＃13;

Answer 1

这个解决方案怎么样？希望它有所帮助！

＆＃13;

$(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); 
});

＆＃13;

.myClass{
  background: purple;
  color: #ffffff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "test">
</div>

＆＃13;

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

1 个答案: