Comment implémenter des couleurs aléatoires à l'aide de JavaScript-js tutoriel-php.cn

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

黄舟

Libérer： 2017-09-22 09:18:55

original

2716 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!