Maison > Article > interface Web > Comment implémenter des couleurs aléatoires à l'aide de JavaScript

Comment implémenter des couleurs aléatoires à l'aide de JavaScript

黄舟original: 2017-09-22 09:18:552662parcourir

Cet article 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. Les amis dans le besoin peuvent se référer aux exemples de cet article

Décrit comment générer simplement des couleurs aléatoires à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

C'est en fait très simple, le noyau fondamental de la génération de couleurs aléatoires est de construire aléatoirement un nombre à six chiffres, le problème des nombres aléatoires de JavaScript

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

1. La première est une mise en page HTML. La balise p est utilisée pour mettre la couleur de fond de p

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

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：À quoi servent les boutons pour les opérations asynchrones $q ?Article suivant：À quoi servent les boutons pour les opérations asynchrones $q ?

Articles Liés

Voir plus