Lettres colorées aléatoires

Question

J'ai ce code :

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

    });

J'essaie de colorier toutes les lettres toutes les 3 secondes en utilisant la fonction setTime () fonction.

Note : J'essaie de colorer chaque lettre d'un mot, en d'autres termes, chaque lettre aura une couleur.

Comme :

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

J'ai essayé avec ce code, mais il change la couleur de la div entière (la div reste avec une seule couleur) :

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

Answer 1

Vous devrez diviser votre texte en children spans et faire le coloriage sur eux.

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>

Answer 2

Si vous voulez obtenir uniquement des couleurs vives, vous ne pouvez pas utiliser le hasard comme ça.

Ce dont vous avez besoin est une fonction de conversion HSV vers RGB, comme ceci :

function HSVtoRGB(h, s, v)
{
    var r, g, b, i, f, p, q, t;
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6)
    {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    r = Math.round(r * 255).toString(16);
    g = Math.round(g * 255).toString(16);
    b = Math.round(b * 255).toString(16);
    if (r.length < 2) r = '0' + r;
    if (g.length < 2) g = '0' + g;
    if (b.length < 2) b = '0' + b;

    return '#' + r + g + b;
}

Les paramètres vont de 0 à 1. Utilisation de HSVtoRGB(Math.random(), 1, 1) vous donnera toujours une couleur vive avec une valeur et une saturation maximales.

Answer 3

Ok, j'ai essayé cela, cela fonctionne exactement comme vous le demandez. Vous pouvez l'utiliser dans votre code.

 window.setInterval(function(){
    changeLetterColor();
        }, 3000);

    function changeLetterColor(){
    var string = "hello world";
    var customstring ='';
    for(var i =0;i<string.length;i++){
    customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
    }

    }

Answer 4

Si le résultat est un texte alors vous devez envelopper chaque lettre avec un span Faites comme le code ci-dessous :

<div  id="list" rows="10"></div>
<script>
  $(function() {
    setTime();
    function setTime() {
        $.ajax({
             url : "../abc.php",
             dataType: "text",
             success : function (result) {
                  $("#list").html(result);
                  $("#list")
                  .contents()
                  .filter(function(){
                    return this.nodeType !== 1;
                  })
                  .wrap( "<b class='colorful_text'></b>" );
                   $.each($(".colorful_text"), function(o, v){

                      var textEle = $(this).text()
                      console.log("textEle", textEle)
                      $(this).html("")
                      for(var n=0; n<textEle.length; n++) {
                            var randomColor = Math.floor(Math.random()*16777215).toString(16);
                            var color = '#' + randomColor
                            var ele = document.createElement("span")
                            ele.style.color = color
                            ele.innerText = textEle[n]        

                            $(this).append(ele)

                      }

                })
             }           
        });
       var date = new Date().getTime();
       setTimeout(setTime, 3000);
       $("#list").html();

       //Here  should call a function to color all the words of the div
    }

});
</script>