Generiere zufällige Farbe in JavaScript
-
Verwenden von
Math.floor(Math.random())zum Generieren einer zufälligen Farbe mit JavaScript in HTML - Alternative Möglichkeit, ein zufälliges Farbergebnis in JavaScript zu erhalten
In diesem Artikel wird die Verwendung von in JavaScript integrierten mathematischen Funktionen und der JQuery-Bibliothek für die Benutzeroberfläche (Benutzeroberfläche) erläutert, um die Hintergrundfarbe der HTML-Webseite onClick zufällig anhand eines Beispiels zu ändern. Mit mathematischen Funktionen können wir leicht die gerundeten Werte als Boden und Obergrenze erhalten, und wir können einen zufälligen Wert mit math.random() erhalten.
Verwenden von Math.floor(Math.random()) zum Generieren einer zufälligen Farbe mit JavaScript in HTML
Die Methode getRandomColor wird immer dann ausgelöst, wenn der Benutzer die Schaltfläche Change background color drückt. Diese Methode verwendet JQuery, um unserem Body-Tag der HTML-Webseite CSS-Stile zuzuweisen, die die Hintergrundfarbe ändern.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>
</body>
<script>
//The ColorCode() will give the code every time.
function ColorCode() {
var makingColorCode = '0123456789ABCDEF';
var finalCode = '#';
for (var counter = 0; counter < 6; counter++) {
finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
}
return finalCode;
}
//Function calling on button click.
function getRandomColor() {
$("#bodyId").css("background-color", ColorCode());
}
</script>
</html>
In der obigen HTML-Seitenquelle können Sie JQuery-Links in <script>-Tags sehen, die notwendig sind, um JQuery-Bibliotheken in doctype html zu verwenden. Im nächsten Schritt wird die Funktion getRandomColor() innerhalb des <script>-Tags in einer weiteren Funktion namens Funktion ColorCode() deklariert, die einen CSS-Stil mit der Eigenschaft background-color zuweist.
Die Funktion ColorCode() enthält eine Folge von Hexadezimalwerten der Reihe nach (0-F). Wir haben eine for-Schleife verwendet, um die Code-Anweisungen auszuführen, bis die gegebene Bedingung wahr ist. In diesem Fall ist die zu erfüllende Bedingung var counter = 0; counter < 6; counter++.
Diese Schleife generiert einen finalCode-String durch Verketten von Zufallswerten mit einer #-Länge von 6, dann geben wir diesen finalCode-String zurück und verwenden ihn als Farbattribut.
Untersuchen Sie den gegebenen HTML-Code
Befolgen Sie diese vier einfachen Schritte, um die Methode getRandomColor zu verstehen.
-
Erstellen Sie ein Textdokument. Sie können Notepad oder jedes andere Textbearbeitungswerkzeug verwenden.
-
Fügen Sie den angegebenen Code in die erstellte Textdatei ein.
-
Speichern Sie diese Textdatei mit der Erweiterung
.htmlund öffnen Sie sie mit einem beliebigen Standardbrowser. -
Sie sehen den Button
Change background color. Mit dieser Schaltfläche können Sie die Hintergrundfarbe nach dem Zufallsprinzip ändern.
Alternative Möglichkeit, ein zufälliges Farbergebnis in JavaScript zu erhalten
Sie können die zufällige Farbauswahl auch in JavaScript erreichen, indem Sie eine einzige Codezeile verwenden, wie unten gezeigt. Es minimiert die Codelänge, um Zeit/Speicher zu sparen und effiziente Ergebnisse zu erzielen.
function generateRandomCode() {
var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return myRandomColor;
}
// will generate any random color
In beiden Beispielen geben generateRandomCode() und ColorCode() einen zufälligen Farbstring zurück, indem sie die in Javascript integrierte Methode Math.random() mit einer Kombination von 6 Längenwerten verwenden.