Maison > Article > interface Web > Un moyen simple de générer des couleurs aléatoires à l'aide de JavaScript

Un moyen simple de générer des couleurs aléatoires à l'aide de JavaScript

小云云original: 2018-02-07 11:23:432865parcourir

Cet article vous présente principalement la méthode de génération simple de couleurs aléatoires en JavaScript, impliquant des techniques d'implémentation liées aux nombres aléatoires et aux opérations de chaîne JavaScript et au fonctionnement dynamique des attributs des éléments de page, j'espère que les amis dans le besoin pourront s'y référer. peut vous aider.

Si vous souhaitez créer l'effet suivant, une couleur sera générée à chaque fois que vous actualisez la page Web

En fait, c'est très simple. Le noyau fondamental de la génération de couleurs aléatoires est la construction aléatoire. Le problème de la génération d'un nombre aléatoire JavaScript à six chiffres

et chaque chiffre de ce nombre à six chiffres est compris entre 0 et f, il existe donc la méthode suivante :

1. Tout d'abord c'est une mise en page HTML La balise p est utilisée pour mettre la couleur actuelle de p est cette couleur

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>randomColor</title>
  </head>
  <body>
    <p id="colorStr"></p>
    <p id="p1" style="width:100px;height:100px"></p>
  </body>
</html>

2. Vient ensuite le script principal :

<script>
  //颜色字符串
  var colorStr="";
  //字符串的每一字符的范围
  var randomArr=[&#39;0&#39;,&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;,&#39;7&#39;,&#39;8&#39;,&#39;9&#39;,&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;];
  //产生一个六位的字符串
  for(var i=0;i<6;i++){
    //15是范围上限，0是范围下限，两个函数保证产生出来的随机数是整数
    colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];
  }
  document.getElementById("colorStr").innerHTML="颜色为：#"+colorStr;
  document.getElementById("p1").style.backgroundColor="#"+colorStr;
</script>

Recommandations associées :

Un moyen simple de générer des couleurs en php

code php pour obtenir une couleur aléatoire

A obtenir une couleur aléatoire générée dans la zone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery implémente le partage de code pour échanger les positions des boutons dans deux divsArticle suivant：jQuery implémente le partage de code pour échanger les positions des boutons dans deux divs

Articles Liés

Voir plus