6
votes

Lettres colorées aléatoires

J'ai ce code:

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

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

Remarque: j'essaie de colorier 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 du div entier (Le div reste avec une seule couleur):

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

    });

javascript html

4 commentaires

Il semble que vous aurez besoin d'éléments pour chaque lettre que vous souhaitez colorier.

qu'est-ce que CC_List1 pouvez-vous montrer du html

CC_List1 sont incorrects, la bonne est list . Je vais éditer le message, désolé.

Je ne pense pas que vous puissiez appliquer un style aux nœuds de texte; uniquement sur les éléments. Je suppose que vous pouvez séparer les lettres en travées individuelles ...

4 Réponses :

0
votes

Si le résultat est un texte, vous devez envelopper chaque lettre avec 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>

2 commentaires

A parfaitement fonctionné! Le seul problème est que vous renvoyez le du fichier sous forme de chaîne et non de balise. Voir: prntscr.com/m8qz05 . Que puis-je faire pour résoudre ce problème et que fonctionne comme un saut de ligne?

Je vous remercie! Parfait!

2
votes

Si vous ne voulez obtenir que des couleurs vives, utiliser un caractère aléatoire comme celui-ci ne le fera pas.

Ce dont vous avez besoin est une fonction de conversion HSV en RVB, comme celle-ci:

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. L'utilisation de HSVtoRGB (Math.random (), 1, 1) vous donnera toujours une couleur vive avec une valeur et une saturation maximales.

0 commentaires

1
votes

ok, j'essaye ça, ça marche exactement comme tu le demandes. 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>";
    }

    }

0 commentaires

2
votes

Vous devrez diviser votre texte en intervalles enfants et faire la coloration dessus.

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

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

0 commentaires