Question

需要以不同的颜色显示每个字符。

    var str="hello"
    console.log(str);
    var strToArr=str.split("");
    console.log(strToArr);
    var letter=["red","blue","green"];
   
    var i=0;
    var reference=document.getElementById("display");

    var interval=setInterval(function(){
        if(i<strToArr.length){
        reference.innerHTML+=strToArr[i];
        reference.style.color=letter[i];
       
        i++;}
    },2000);

<body>
    <span id="display"></span>
</body>

需要用不同的颜色显示每个字符。

Answer 1

为每个字符使用span元素

注意： clearInterval()清除使用setInterval()方法设置的计时器

var str = "hello"
console.log(str);

var strToArr = str.split("");
console.log(strToArr);

var letter = ["red", "blue", "green"];

var i = 0;
var reference = document.getElementById("display");

var interval = setInterval(function() {
  if (i == strToArr.length) {
    clearInterval(interval)
    return
  }
  let span = document.createElement('span')
  span.style.color = letter[i]
  span.innerHTML = strToArr[i]
  reference.appendChild(span);
  i++;
}, 500);

<span id="display"></span>

Answer 2

类似的事情应该可以解决您的问题。为<span>元素添加了style和相应的颜色。我还添加了两种颜色。

    var str="hello"
    console.log(str);
    var strToArr=str.split("");
    console.log(strToArr);
    var letter=["red","blue","green","orange","yellow"];
   
    var i=0;
    var reference=document.getElementById("display");

    var interval=setInterval(function(){
        if(i<strToArr.length){
        reference.innerHTML+='<span style="color:' + letter[i] + ';">' + strToArr[i] + '</span>';  
        i++;}
    },2000);

<body>
    <span id="display"></span>
</body>

因此，最终的DOM应该看起来像这样。

<body>
    <span id="display">
        <span style="color:red;">h</span>
        <span style="color:blue;">e</span>
        <span style="color:green;">l</span>
        <span style="color:orange;">l</span>
        <span style="color:yellow;">o</span>
    </span>
</body>

编辑：另一种可能更好的方法可能是完全不使用JS设置颜色。我希望使用:nth-child选择器。请查看Mozilla主页上的the documentation，了解如何使用它。例如：

#display > span:nth-child(0) { color: red; }
#display > span:nth-child(1) { color: blue; }
#display > span:nth-child(2) { color: green; }
#display > span:nth-child(3) { color: orange; }
#display > span:nth-child(4) { color: yellow; }

Answer 3

必须将每个字符都用span标记括起来，以便可以分别为每个字符设置样式。我添加了colorCounter重置，因此无论您的字符串有多长，它都会循环回到红色。

var str="hello this is a long string"
    console.log(str);
    var strToArr=str.split("");
    console.log(strToArr);
    var letter=["red","blue","green"];
   
    var i=0;
    var colorCounter = 0;
    var reference=document.getElementById("display");

    var interval=setInterval(function(){
        if(i<strToArr.length){
        reference.innerHTML+='<span style="color:'+letter[colorCounter]+'">'+strToArr[i]+'</span>';
       
        i++;
        colorCounter++;
        // resets color counter and loop back to red
        if(colorCounter > (letter.length-1)){colorCounter =0}
        }
    },2000);

 <div id="display"></div>

需要用不同的颜色显示每个字符

3 个答案: