suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Erhalten zufälliger Farben mit jQuery

Detaillierte Erläuterung der Schritte zum Erhalten zufälliger Farben mit jQuery

php中世界最好的语言
php中世界最好的语言Original
2018-05-23 09:35:251385Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Erhalten zufälliger Farben mit jQuery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für jQuery, um zufällige Farben zu erhalten?

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());

2.html

.

获取任意颜色

 

Wirkung:

Das Folgende ist ein Codestück über verschiedene Methoden zum Generieren zufälliger Farben in 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>

Ich glaube Ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Anwendungsfälle von JavaScript-Rückruffunktionen

Welche Vorsichtsmaßnahmen gelten für die Verwendung von React Navigation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Erhalten zufälliger Farben mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Legen Sie Access-Control-Allow-Origin fest, um domänenübergreifenden Zugriff zu erreichenNächster Artikel：Legen Sie Access-Control-Allow-Origin fest, um domänenübergreifenden Zugriff zu erreichen

In Verbindung stehende Artikel

Mehr sehen