Comment implémenter un mappage aléatoire de l'arrière-plan des éléments ?
P粉286046715
P粉286046715 2023-09-11 22:32:31
0
1
500

Je souhaite définir aléatoirement la couleur d'arrière-plan de chaque élément

Mais lorsque je l'insère dans le code suivant, la couleur de fond devient transparente :

{
  modules.map((module, index) => (
    <div className='carousel-module shadow'
      style={{ background: "#" + Math.floor(Math.random()*16777215).toString(16)}}
    >
      <p className='module-element-text'>{module.name ? module.name : "N/A"}</p>
      <p className='module-element-text'>{module.code ? module.code : "N/A"}</p>
      <Button onClick={() => setShow(false)}
          variant="success" className='modules-list-button'>
          Load
      </Button>
    </div>
  ))
}

Ce serait formidable d'entendre vos suggestions sur la façon de le faire fonctionner.

P粉286046715
P粉286046715

répondre à tous(1)
P粉190883225

C'est la fonction que j'utilise pour générer des couleurs hexadécimales. Votre méthode peut introduire un canal alpha dans la couleur, la rendant transparente.

function randomHexColor() {
    let toHex = function (n) {
        let hex = n.toString(16);
        while (hex.length < 2) { hex = '0' + hex; }
        return hex;
    };
    let rr = toHex(Math.floor(Math.random() * 256));
    let gg = toHex(Math.floor(Math.random() * 256));
    let bb = toHex(Math.floor(Math.random() * 256));
    return '#' + rr + gg + bb;
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal