JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

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

Artikel empfehlen

Installieren Sie Percona Server+MySQL auf CentOS 7

1. Umgebungsbeschreibung (1) CentOS-7-x86_64, Ker...

Beispielanalyse des asynchronen Verhaltens von Popup-Fenstern auf Front-End-Webseiten von Vue.js

Inhaltsverzeichnis 1. Vorwort 2. Finden Sie zwei ...

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

1. CSV-Datei importieren Verwenden Sie den folgen...

Verwenden von Nginx zum Implementieren der Graustufenversion

Unter Graustufenfreigabe versteht man eine Freiga...

Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

Code kopieren Der Code lautet wie folgt: <!DOC...

MySQL 8.0.18 fügt Benutzer zur Datenbank hinzu und erteilt Berechtigungen

1. Es wird empfohlen, den Root-Benutzer für die A...

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

Die von MySQL erstellte Optimierung besteht im Hi...

Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx

Trennung von statischer und dynamischer Dynamisch...

Node.js versendet E-Mails basierend auf dem STMP-Protokoll und dem EWS-Protokoll

Inhaltsverzeichnis 1 Node.js-Methode zum Senden v...

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Vorwort Das MySQL Slow Query Log ist eine Funktio...

Über das Wertübertragungsproblem zwischen Antd-Baum und übergeordneten und untergeordneten Komponenten (Reaktionszusammenfassung)

Projektanforderungen: Wenn Sie auf einen Produktb...

Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse

veranschaulichen: Als ich heute das letzte Experi...

So verwenden Sie den JS-Code-Compiler Monaco

Vorwort Meine Anforderungen sind Syntaxhervorhebu...

Detaillierte Erklärung der Überwachungseigenschaften von Vue

Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...

Implementierungsschritte für die Docker-Bereitstellung lnmp-wordpress

Inhaltsverzeichnis 1. Experimentelle Umgebung 2. ...