javascript - 随机彩色字母

Question

我有这个代码:

<div  id="list" rows="10"></div>
<script>
 $(function() {
   setTime();
   function setTime() {
       $.ajax({
            url : "../abc.php",
            dataType: "text",
            success : function (result) {
                $("#list").html(result);
            }           
        });
      var date = new Date().getTime();
      setTimeout(setTime, 3000);
      $('#list').html(result);
      //Here  should call a function to color all the words of the div
   }


    });
</script>

    });

我尝试使用 setTime () 函数每 3 秒为所有字母着色一次。

注意:我正在尝试为单词的每个字母着色，换句话说，每个字母都有一种颜色

喜欢:

https://i.imgur.com/Tw2Q58U.png

我试过这段代码，但它改变了整个 div 的颜色(div 只保留一种颜色):

var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.getElementById('list').style.color = '#' + randomColor

Answer 1

您必须将文本分成子级 spans 并对它们进行着色。

function colorElement(element) {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  element.style.color = '#' + randomColor;
}

function splitElement(element) {
  var text = element.innerText;
  element.innerText = '';
  var chars = text.split('');
  for(var ch of chars) {
     var charSpan = document.createElement('span');
     charSpan.innerText = ch;
     element.appendChild(charSpan);
  }
}

function randomColor() {
   var result = document.querySelectorAll('span span');
   for(ele of result){
      colorElement(ele);
   }
}

var ele = document.getElementById('myText');
splitElement(ele);
setInterval(function() {
   randomColor();
},500);

<div>
  <span id="myText">Disco Text</span>
</div>