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
Zeitleistenimplementierungsmethode basierend auf ccs3
In Webprojekten nutzen wir häufig die Zeitleisten...
So installieren Sie Nginx in CentOS7 und konfigurieren den automatischen Start
1. Laden Sie das Installationspaket von der offiz...
Wie stelle ich Tomcat als automatisch gestarteten Dienst ein? Der schnellste Weg
Stellen Sie Tomcat so ein, dass der Dienst automa...
Verständnis für Webdesign-Layout
<br />Hier ergibt sich ein Widerspruch: In k...
So filtern Sie doppelte Daten heraus, wenn Sie große Datenmengen in MySQL einfügen
Inhaltsverzeichnis 1. Entdecken Sie das Problem 2...
Was bei der Migration von MySQL auf 8.0 zu beachten ist (Zusammenfassung)
Passwortmodus PDO::__construct(): Der Server hat ...
Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)
Gute Datenbankspezifikationen tragen dazu bei, di...
Data URI und MHTML Komplettlösung für alle Browser
Daten-URI Data URI ist ein durch RFC 2397 definie...
Welche Vorteile bietet die Verwendung von // anstelle von http:// (adaptives https)?
//Standardprotokoll /Die Verwendung des Standardp...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein,...
So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate
Welches dieser Formate (GIF, PNG oder JPG) sollte...
Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)
1. Übergeordnetes Div definiert Pseudoklassen: af...
So übertragen Sie Dateien zwischen Windows und Linux
Dateiübertragung zwischen Windows und Linux (1) V...
Vollständiges Installations- und Konfigurations-Tutorialdiagramm für das komprimierte MySQL 8.0.22-Paket (getestet und effektiv)
1. Laden Sie das Zip-Installationspaket herunter ...
mysql5.7.21.zip Installations-Tutorial
Der detaillierte Installationsprozess von mysql5....