Comment obtenir des couleurs aléatoires avec jQuery-js tutoriel-php.cn

Comment obtenir des couleurs aléatoires avec jQuery

php中世界最好的语言

Libérer： 2018-05-28 14:30:29

original

2367 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser jQuery pour obtenir des couleurs aléatoires. Quelles sont les précautions concernant l'utilisation de jQuery pour obtenir des couleurs aléatoires. Voici des cas pratiques, jetons un coup d'œil.

1.js

//获取十六进制颜色 
  function randomColor1(){ 
   var r = Math.floor(Math.random()*256); 
   var g = Math.floor(Math.random()*256); 
   var b = Math.floor(Math.random()*256); 
   if(r < 16){ 
    r = "0"+r.toString(16); 
   }else{ 
    r = r.toString(16); 
   } 
   if(g < 16){ 
    g = "0"+g.toString(16); 
   }else{ 
    g = g.toString(16); 
   } 
   if(b < 16){ 
    b = "0"+b.toString(16); 
   }else{ 
    b = b.toString(16); 
   } 
   return "#"+r+g+b; 
  } 
  $("h3").css("color",randomColor1());

Copier après la connexion

2.html

.

`获取任意颜色`

  Effet : 
Ce qui suit est un morceau de code sur plusieurs façons de générer des couleurs aléatoires en js 
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
  <button id="btn1">调用第一种</button>
  <button id="bnt2">调用第二种</button>
  <button id="btn3">调用第三种</button>
  <script>
   var btn1=document.getElementById('btn1');
   btn1.onclick=function(){
    document.body.style.background=bg1()
   };
   var btn2=document.getElementById('bnt2');
   btn2.onclick=function(){
    document.body.style.background=bg2();
   };
   var btn3=document.getElementById('btn3');
   btn3.onclick=function(){
    document.body.style.background=bg3();
   };
   function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
   }
   function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
   }
   function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
   }
  </script>
</body>
</html>
Copier après la connexion
Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! 
Lecture recommandée : 
Comment utiliser l'attribut jquery toggleClass() pour créer des paragraphes d'article afin de changer la couleur d'arrière-plan
 Comment utiliser le plug-in de chargement Lazy basé sur Vue vue-view-lazy
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!