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:

AngularJS: Klicken Sie, um Stil hinzuzufügen, und klicken Sie, um die Farbeinstellung zu ändern – Beispielcode
JavaScript implementiert den Farbänderungseffekt beim Klicken mit der Maus auf die Navigationsleiste
AngularJS implementiert Schaltflächenaufforderungen und Klick-Farbänderungseffekte
So ändern Sie die Farbe abwechselnder Zeilen in einer Javascript-Tabelle und fügen Mausbewegungs- und Klickeffekte hinzu
Js erkennt, dass beim Klicken auf ein Etikett die Farbe geändert wird, und hebt andere Etiketts hervor, um die ursprüngliche Farbe wiederherzustellen.
Verwenden Sie Javascript CSS, um einen Wechsel der Hintergrundfarbe für GridView-Zeilen zu implementieren. Bewegen Sie die Maus über die Zeilenfarbe, und klicken Sie auf die Auswahl der Zeilenfarbe.
JavaScript basierend auf jQuery, Farbe beim Hovern auf die Tabelle ändern/wiederherstellen, Farbe beim Klicken auf die Tabelle ändern/wiederherstellen, Zeile anklicken, um Kontrollkästchen auszuwählen

<<: So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA

>>: MYSQL 5.6 Bereitstellung und Überwachung der Slave-Replikation

Detaillierte Erläuterung der JS ES6-Codierungsstandards

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

Detaillierte Erläuterung der JS ES6-Codierungsstandards

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

So erstellen Sie eine Swap-Partitionsdatei in Linux

Lösungen für Probleme bei der Leistungsoptimierung von MySQL-Indizes

Spezifische Verwendung von CSS-Inhaltsattributen

Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

Ein Beispiel, wie Tomcat Session verwaltet

Diskussion zum Problem der Initialisierung von Iframe-Knoten

Zusammenfassung der Updates und gefundenen Probleme des Docker Consul-Containerdienstes

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

Artikel empfehlen

React + Threejs + Swiper vollständiger Code zum Erzielen eines Panoramaeffekts

Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container

Das WeChat-Applet realisiert den Effekt des Siebschüttelns

MySQL-Abfragedaten stündlich, geben Sie 0 ein, wenn keine Daten vorhanden sind

Mehrere Möglichkeiten zum Hinzufügen von Zeitstempeln in MySQL-Tabellen

Virtuelle Maschinen zwischen VMware Workstation und vSphere migrieren (Bild und Text)

So verwenden Sie den Linux-Befehl whatis

base target="" gibt das Ziel des Basislinks zum Öffnen des Frames an

Lösung des Konflikts zwischen Linux-Kernel- und SVN-Versionen

Nginx-Anti-Crawler-Strategie, um UA am Crawlen von Websites zu hindern

Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist

Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen

So wählen Sie den richtigen Index in MySQL

Detaillierte Anwendungsfälle von MySql Escape