Un moyen simple de générer des couleurs aléatoires à l'aide de JavaScript-js tutoriel-php.cn

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

小云云

Libérer： 2018-02-07 11:23:43

original

2927 Les gens l'ont consulté

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>

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

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!