JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern
|
In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Farbänderungseffekts durch Klicken auf neun Raster zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Vervollständigen Sie das Neun-Raster-Layout und ändern Sie die Hintergrundfarbe jedes Rasters, indem Sie darauf klicken.
Verwenden Sie zunächst die Tabelle, um das Rastergerüst mit den neun Quadraten zu vervollständigen:
<Tabelle>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</Tabelle>Legen Sie den Jiugong-Rasterstil fest:
<Stil>
Tisch{
Höhe: 600px;
Breite: 600px;
Rahmenabstand: 0;
}
td{
Rand: 0;
Rand: 1px durchgehend rot;
}
</Stil>Um schließlich den Effekt zu erzielen, dass jedes Quadrat einen Klick hat, fügen Sie jedem td ein onclick-Attribut hinzu und referenzieren Sie das Objekt selbst folgendermaßen:
<Tabelle>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
</Tabelle>Auch hier habe ich zuvor versucht, alle Klickereignisse über CSS festzulegen, und zwar wie folgt:
<Stil>
td{
beim Klicken: ändern (dies);
}
</Stil>Aber es kann nicht verwendet werden und es bleibt eine Frage. Schließlich verwendet der wichtigste JS-Codeteil Math.random()*256, um eine Zufallszahl zwischen 0 und 256 zu generieren, verwendet dann parseInt(), um den Typ in eine Ganzzahl umzuwandeln, und legt die Hintergrundfarbe über „.style.backgroundColor“ fest:
Funktion ändern(a) {
var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
a.style.backgroundColor="rgb("+randomNum+")";
}Der vollständige Code lautet wie folgt: Tabellenversion:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
Tisch{
Höhe: 600px;
Breite: 600px;
Rahmenabstand: 0;
}
td{
Rand: 0;
Rand: 1px durchgehend rot;
}
</Stil>
</Kopf>
<Text>
<!--Nutzen Sie Front-End-Wissen, um das Neun-Raster-Layout zu realisieren. Klicken Sie auf ein beliebiges Raster, um die Hintergrundfarbe des Rasters nach dem Zufallsprinzip zu ändern-->
<Tabelle>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
<tr>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
<td onclick="ändern(dies)"></td>
</tr>
</Tabelle>
<Skript>
Funktion ändern(emle) {
konsole.log("1");
var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256);
console.log(Zufallszahl);
emle.style.backgroundColor="rgb("+randomNum+")";
}
</Skript>
</body>
</html>Div-Version:
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
#Kasten{
Rand: 0 automatisch;
Breite: 306px;
Höhe: 306px;
Rand: 1px durchgehend rot;
}
#box div{
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogen #ccc;
schweben: links;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
<div onclick="Farbe ändern(diese)"></div>
</div>
<Skript>
Funktion changeColor(Element){
var red = parseInt(Math.random()*256);
var blau = parseInt(Math.random()*256);
var grün = parseInt(Math.random()*256);
elem.style.backgroundColor = "rgb("+rot+","+blau+","+grün+")";
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA
>>: MYSQL 5.6 Bereitstellung und Überwachung der Slave-Replikation
Artikel empfehlen
MySQL 5.7-Installation Der MySQL-Dienst kann nicht gestartet werden, meldet jedoch keine Fehler
Es gibt zwei Möglichkeiten, MySQL 5.7 zu installi...
MySQL Best Practices: Grundlegende Arten von Partitionstabellen
Übersicht über partitionierte MySQL-Tabellen Da M...
JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen
Durchführung von Prozessanalysen (1) Wie rufe ich...
CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)
Deaktivieren Sie SeLinux setenforce 0 Dauerhaft g...
Linux-Installation MySQL5.6.24 Nutzungsanweisungen
Hinweise zur Linux-Installation von MySQL 1. Stel...
Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)
Das sogenannte dreispaltige adaptive Layout bedeu...
Beispielcode für CSS-Spalten zum Erreichen eines zweiseitig ausgerichteten Layouts
1. Im Kreis herumlaufen Nach einigem Herumexperim...
React Diff-Algorithmus-Quellcodeanalyse
Inhaltsverzeichnis Einzelner Knoten Diff Einzelel...
Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel
Vorwort Als ich kürzlich an einem Projekt arbeite...
Zusammenfassung der Vorteile von Vue3 gegenüber Vue2
Inhaltsverzeichnis 1. Warum brauchen wir vue3? 2....
Detaillierte Erklärung der MySQL-Syntax, Sonderzeichen und regulären Ausdrücke
Häufig verwendete Anzeigebefehle für MySQL 1. Zei...
So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS
Ich bin auf ein Beispiel gestoßen, als ich nach e...
Der Unterschied sowie die Vor- und Nachteile des MySQL-Primärschlüssels UUID und des automatisch inkrementierten Primärschlüssels
Einführung Ich habe eine Zeit lang die PostgreSQL...
Eine kleine Frage zur Ausführungsreihenfolge von SQL in MySQL
Ich bin heute bei der Arbeit auf ein SQL-Problem ...
Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)
Vorwort Excel ist leistungsstark und weit verbrei...