Beispiele für JavaScript-Operationselemente

Weitere Informationen zu Bedienelementen finden Sie im vorherigen Artikel: JavaScript WebAPI, DOM, Ereignisse, Bedienelemente

Fall: Versteckte Kennwort-Groß-/Kleinschreibung anzeigen

Kernidee: (Bedienung von Formularelementattributen)

Klicken Sie auf die Augenschaltfläche und ändern Sie den Kennwortfeldtyp in ein Textfeld, sodass Sie das Kennwort darin sehen können. Eine Schaltfläche mit zwei Zuständen.
Klicken Sie einmal, um zu einem Textfeld zu wechseln, klicken Sie erneut, um zu einem Kennwortfeld zu wechseln
Algorithmus: Verwenden Sie eine Flag-Variable, um den Flag-Wert zu bestimmen. Wenn er 1 ist, wechseln Sie zu einem Textfeld und setzen Sie das Flag auf 0. Wenn er 0 ist, wechseln Sie zu einem Kennwortfeld und setzen Sie das Flag auf 1.

<Stil>
    .Kasten{
        Position: relativ;
        Breite: 400px;
        Rahmen unten: 1px durchgezogen #ccc;
        Rand: 100px automatisch;
    }
    .box Eingabe{
        Breite: 370px;
        Höhe: 30px;
        Rand: 0;
        Gliederung: keine;
    }
    .box img{
        Position: absolut;
        oben: 2px;
        rechts: 2px;
        Breite: 24px;
    }
</Stil>
<Text>
    <div Klasse="Box">
        <label für="">
            <img src="./image/close.png" alt="" id="eye">
        </Bezeichnung>
        <input type="password" name="" id="pwd">
    </div>
    <Skript>
        var Auge = document.getElementById('Auge')
        var pwd = document.getElementById('pwd')
        Variable Flag = 0
        Auge.beimKlicken=Funktion(){
        	//Textfeldtyp, Bild und Tag-Wert nach dem Klicken ändern if(flag==0){
                pwd.type = "Text"
                eye.src='./Bild/öffnen.png'
                Flagge = 1 
            }anders{
                pwd.type = "Passwort"
                Flagge = 0
            }
        }
    </Skript>
</body>

Beispiel: Radsport-Sprites

Kernidee: (Bedienelement-Stil)

Verwenden Sie die For-Schleife, um die Hintergrundposition des Sprite-Bildes zu ändern
background-position macht die i-Indexnummer in der Schleife * 44 die y-Koordinate jedes Bildes

<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
    }
    li{
        Listenstiltyp: keiner;
    }
    .Kasten{
        Breite: 250px;
        Rand: 100px automatisch;
    }
    .box li{
        Rand: 15px;
        schweben: links;
        Breite: 24px;
        Höhe: 24px;
        Hintergrund: URL(./image/sprite.png) keine Wiederholung;
    }
</Stil>
<Text>
    <div Klasse="Box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <Skript>
        // 1. Holen Sie sich alle kleinen li des Elements 
        var lis = document.querySelectorAll('li');
        für (var i = 0; i < lis.length; i++) {
            // Multiplizieren Sie die Indexnummer mit 44, um die Hintergrund-Y-Koordinate jedes li zu erhalten var y = i * 44;
            lis[i].style.backgroundPosition = '0 -' + y + 'px';
        }
    </Skript>
</body>

Fall: Informationen zur Kennwortfeldüberprüfung

Kernidee: (Verwenden Sie className, um Stilattribute zu ändern)

Das erste zu beurteilende Ereignis ist, dass die Form den Fokus verliert auf Unschärfe
Bei korrekter Eingabe werden die richtigen Informationen mit einem kleinen grünen Icon angezeigt.
Wenn die Eingabe nicht 6 bis 16 Ziffern umfasst, wird die Fehlermeldung mit einem kleinen roten Symbol angezeigt.
Da es viele sich ändernde Stile gibt, verwenden Sie className, um den Stil zu ändern

<Stil>
    div {
        Breite: 600px;
        Rand: 100px automatisch;
    }
    .Nachricht {
        Anzeige: Inline-Block;
        Schriftgröße: 12px;
        Farbe: #999;
        Hintergrund: URL(./image/mess.png) keine Wiederholung links Mitte;
        Polsterung links: 20px;
    }
    .falsch {
        Farbe: rot;
        Hintergrundbild: URL(./Bild/falsch.png);
    }
    .Rechts {
        Farbe: grün;
        Hintergrundbild: URL(./Bild/rechts.png);
    }
</Stil>
<Text>
    <div Klasse="registrieren">
        <input type="password" class="ipt">
        <p class="message">Bitte geben Sie ein 6-16-stelliges Passwort ein</p>
    </div>
    <Skript>
        var ipt = document.querySelector('.ipt')
        var Nachricht = document.querySelector('.message')
        ipt.onblur = Funktion () {
            wenn (diese.Wertlänge < 6 || diese.Wertlänge > 16) {
                messgae.className = 'Nachricht falsch'
                messgae.innerHTML = „Ihre Eingabe ist falsch. Es werden 6 bis 16 Ziffern benötigt.“
            } anders {
                messgae.className = 'Nachricht rechts'
                messgae.innerHTML = 'Ihre Eingabe ist korrekt'
            }
        }
    </Skript>
</body>

1749.png)

Fall: Änderung der Hintergrundfarbe

Kernidee: (Stilattribute des Bedienelements)

Registrieren Sie Klickereignisse für 4 kleine Bilder in einer Schleife. Wenn Sie auf dieses Bild klicken, ändern Sie den Seitenhintergrund zum aktuellen Bild. Kernalgorithmus: Holen Sie sich den Quellpfad des aktuellen Bilds und legen Sie ihn als Hintergrund für den Hauptteil fest.

<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
    }
    Körper{
        Hintergrund: URL (./Bild/1.jpg), keine Wiederholung oben in der Mitte;
    }
    li{
        Listenstiltyp: keiner;
    }
    .tu{
        Überlauf: versteckt;
        Rand: 100px automatisch;
        Hintergrundfarbe: #fff;
        Breite: 410px;
        Polsterung oben: 3px;
    }
    .tu li{
        schweben: links;
        Rand: 0 1px;
        Cursor: Zeiger;
    }
    .tu img{
        Breite: 100px;
    }
</Stil>
<Text>
    <ul Klasse="tu">
        <li><img src="./bild/1.jpg"></li>
        <li><img src="./bild/2.jpg"></li>
        <li><img src="./image/3.jpg"></li>
        <li><img src="./bild/4.jpg"></li>
    </ul>
    <Skript>
        //Elemente abrufen var imgs = document.querySelector('.tu').querySelectorAll('img');
        //Ereignis registrieren für (var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                // this.src Pfad zum Text
                Dokument.Body.Style.BackgroundImage='URL('+this.src+')';
            }
        }
    </Skript>
</body>

Fall: Farbänderung der Tabelle

Kernidee: (exklusives Denken)

Verwenden Sie neue Mausereignisse: onmouseover, wenn die Maus darüber fährt, onmouseout, wenn die Maus geht. Kernidee: Wenn die Maus über eine tr-Zeile fährt, ändert sich die Hintergrundfarbe der aktuellen Zeile, und wenn die Maus geht, wird die aktuelle Hintergrundfarbe entfernt. Hinweis: Die erste Zeile (die Zeile im Thread) muss die Farbe nicht ändern, daher werden die Zeilen im tbody abgerufen.

<Stil>
    Tisch{
        Breite: 800px;
        Rand: 100px automatisch;
        Textausrichtung: zentriert;
        Rahmen-Zusammenbruch: Zusammenbruch;
        Schriftgröße: 14px;
    }
    thead tr{
        Höhe: 30px;
        Hintergrundfarbe: himmelblau;
    }
    tbody tr{
        Höhe: 30px;
    }
    tbody td{
        Rahmen unten: 1px durchgezogen #d7d7d7;
        Schriftgröße: 12px;
        Farbe: blau;
    }
    .bg{
        Hintergrundfarbe: rosa;
    }
</Stil>
<Text>
    <Tabelle>
        <Kopf>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Zuletzt veröffentlichtes Nettovermögen</th>
                <th>Kumulierter Nettowert</th>
                <th>Vorheriger Einheitsnettowert</th>
                <th>Wachstumsrate des Nettovermögens</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
            <tr>
                <td>003526</td>
                <td>3-monatige reguläre offene Anleihe Jinsui der Agricultural Bank of China</td>
                <td>1,075</td>
                <td>1,079</td>
                <td>1,074</td>
                +0,047 %
            </tr>
        </tbody>
    </Tabelle>
    <Skript>
        //Element abrufen var trs = document.querySelector('tbody').querySelectorAll('tr')
        //Ereignis registrieren für (var i=0;i<trs.length;i++){
            trs[i].onmouseover=Funktion(){
                dies.Klassenname='bg'
            }
            trs[i].onmouseout=Funktion(){
                diese.Klassenname=''
            }
        }
    </Skript>
</body>

Fall: Alles auswählen und Auswahl für alles aufheben in einem Formular

Kernidee:

So wählen Sie alles aus und heben die Auswahl auf: Legen Sie das Attribut „aktiviert“ (ausgewählter Status) aller Kontrollkästchen so fest, dass es der Schaltfläche „Alle auswählen“ folgt.
Alle Kontrollkästchen müssen aktiviert sein. Um alle auszuwählen, binden Sie Klickereignisse an alle Kontrollkästchen unten. Gehen Sie bei jedem Klicken alle Kontrollkästchen unten durch, um zu sehen, ob eines davon nicht aktiviert ist. Wenn eines nicht aktiviert ist, werden alle oben genannten nicht aktiviert.
Sie können eine Variable festlegen, um zu steuern, ob alle Auswahlen ausgewählt werden

<Stil>
    *{
        Polsterung: 0;
        Rand: 0;
    }
    .wickeln{
        Breite: 300px;
        Rand: 100px auto 0;
    }
    Tisch{
        Rahmen-Zusammenbruch: Zusammenbruch;
        Rahmenabstand: 0;
        Rand: 1px durchgezogen #c0c0c0;
        Breite: 300px;
    }
    th,td{
        Rand: 1px durchgezogen #d0d0d0;
        Farbe: #404060;
        Polsterung: 10px;
    }
    das {
        Hintergrundfarbe: #09c;
        Schriftart: fett 16px „Microsoft YaHei“;
        Farbe: #fff;
    }
    td{
        Schriftart: 14px „Microsoft YaHei“;
    }
    tbody tr{
        Hintergrundfarbe: #f0f0f0;
    }
    tbody tr:hover{
        Cursor: Zeiger;
        Hintergrundfarbe: #fafafa;
    }
</Stil>
<Text>
    <div Klasse="wrap">
        <Tabelle>
            <Kopf>
                <tr>
                    <th>
                        <Eingabetyp="Kontrollkästchen" id="cbAlle" />
                    </th>
                    <th>Produkte</th>
                    <th>Preis</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <Eingabetyp="Kontrollkästchen" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <Eingabetyp="Kontrollkästchen" />
                    </td>
                    iPad Pro
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <Eingabetyp="Kontrollkästchen" />
                    </td>
                    iPad Air
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <Eingabetyp="Kontrollkästchen" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </Tabelle>
    </div>
    <Skript>
        //Element abrufen var cbAll = document.getElementById('cbAll'); //Alles auswählen-Schaltfläche var tbs = document.getElementById('tb').getElementsByTagName('input'); //Alle Kontrollkästchen-Schaltflächen //Ereignis registrieren //Alles auswählen cbAll.onclick = function () {
            für (var i = 0; i < tbs.length; i++) {
                tbs[i].checked = dies.checked;
            }
        }
        //Auswahl umkehren für (var i = 0; i < tbs.length; i++) {
            tbs[i].onclick = Funktion () {
                var flag = true //Steuert die Schaltfläche „Alles auswählen“//Überprüft bei jedem Klicken auf das Kontrollkästchen, ob alle ausgewählt sind für (var i = 0; i < tbs.length; i++) {
                    wenn (tbs[i].checked == false) {
                        Flagge = falsch
                        brechen
                    }
                }
                cbAll.checked = Flagge
            }
        }
    </Skript>
</body>

Fall: Tab-Leistenwechsel

Kernidee: (Exklusive Idee)

Das Umschalten der Tab-Leiste verfügt über 2 große Module
Klicken Sie oben auf die Registerkarte „Modul“. Die Hintergrundfarbe des aktuellen Moduls ist rot und der Rest bleibt unverändert (exklusive Idee). So ändern Sie den Klassennamen
Der Modulinhalt unten ändert sich mit den Registerkarten oben. Daher werden folgende Moduländerungen in das Click-Event geschrieben. Regel: Der im Modul unten angezeigte Inhalt entspricht nacheinander den Registerkarten oben und stimmt überein
Kernidee: Fügen Sie allen kleinen li in der obigen Tab-Liste benutzerdefinierte Attribute hinzu, und die Attributwerte beginnen bei 0.
Wenn Sie in tab_list auf ein kleines li klicken, wird der Inhalt der entsprechenden Nummer in tab_con angezeigt und der Rest wird ausgeblendet (exklusive Idee).

<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
    }
    li{
        Listenstiltyp: keiner;
    }
    .Tab{
        Breite: 978px;
        Rand: 100px automatisch;
    }
    .tab_list{
        Höhe: 39px;
        Rand: 1px durchgezogen #ccc;
        Hintergrundfarbe: #f1f1f1;
    }
    .tab_list li{
        schweben: links;
        Höhe: 39px;
        Zeilenhöhe: 39px;
        Polsterung: 0 20px;
        Textausrichtung: zentriert;
        Cursor: Zeiger;
    }
    .tab_list .aktuell{
        Hintergrundfarbe: #c81623;
        Farbe: #fff;
    }
    .Artikel{
        Anzeige: keine;
    }
    .item_info{
        Polsterung: 20px 0 0 20px;
    }
</Stil>
<Text>
    <div Klasse="Tabulator">
        <div Klasse="Tab_Liste">
            <ul>
                <li class="current">Produkteinführung</li>
                <li>Spezifikationen und Verpackung</li>
                <li>Kundendienstgarantie</li>
                <li>Produktbewertungen (50.000)</li>
                <li>Mobile Community</li>
            </ul>
        </div>
        <div Klasse="tab_con">
            <div Klasse="Artikel" Stil="Anzeige: Block;">
                Inhalt des Moduls „Produkteinführung“</div>
            <div Klasse="Artikel">
                Spezifikationen und Inhalt des Verpackungsmoduls</div>
            <div Klasse="Artikel">
                Inhalt des Moduls „After-Sales-Garantie“</div>
            <div Klasse="Artikel">
                Produktbewertungen (50000) Modulinhalt</div>
            <div Klasse="Artikel">
                Inhalt des Mobile Community-Moduls</div>
        </div>
    </div>
    <Skript>
        //Element abrufen var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var Elemente = document.querySelectorAll('.item');
        //Ereignis registrieren für (var i = 0; i < lis.length; i++) {
            //Setze die Indexnummer für das li-Element lis[i].setAttribute('index', i);
            lis[i].onclick = Funktion () {
                //Tab-Inhalt //Alle aktuellen Klassen von li löschen for (var i = 0; i < lis.length; i++) {
                    lis[i].Klassenname = '';
                }
                //Fügen Sie die aktuelle Klasse zu sich selbst hinzu. this.className = 'current';

                //Inhalt anzeigen var index = this.getAttribute('index');
                // Inhalt der verbleibenden Elemente löschen for (var i = 0; i < items.length; i++) {
                    Elemente[i].style.display = "keine";
                }
                // Den Inhalt des eigenen Elements anzeigen items[index].style.display = 'block';
            }
        }
    </Skript>
</body>

Zusammenfassen

Dies ist das Ende dieses Artikels über JavaScript-Operationselemente. Weitere relevante Inhalte zu JS-Operationselementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript
Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen
js betreibt zwei JSON-Arrays, um sie zusammenzuführen, Duplikate zu entfernen und ein bestimmtes Element zu löschen
Das Klickereignis von vue.js ruft die Operation des aktuellen Elementobjekts ab
Beispielanalyse für das Hinzufügen, Bearbeiten und Löschen von JavaScript-HTML-DOM-Elementen (Knoten)
Vollständiges Beispiel für die Operation eines JS-Dokumentformularelements
Zusammenfassung gängiger Methoden von JavaScript-Operationselementen
JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

<<: Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)

>>: Konfigurationsmethode für die ZIP-Installation der komprimierten MySQL-Paketversion

So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden

Beispiele für JavaScript-Operationselemente

Fall: Versteckte Kennwort-Groß-/Kleinschreibung anzeigen

Beispiel: Radsport-Sprites

Fall: Informationen zur Kennwortfeldüberprüfung

Fall: Änderung der Hintergrundfarbe

Fall: Farbänderung der Tabelle

Fall: Alles auswählen und Auswahl für alles aufheben in einem Formular

Fall: Tab-Leistenwechsel

Zusammenfassen

So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden

Reacts Methode zur Realisierung einer sekundären Verknüpfung

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 winx64

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8

Eine kurze Diskussion über die Effizienz der MySQL-Unterabfrage-Vereinigung und in

Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

Vergleichstabelle für HTML-Sondersymbole auf Webseiten

Analyse des Prozesses zur Implementierung eines Nginx+Tomcat-Clusters unter Windwos

Hinzufügen und Löschen von Tabelleninformationen mit Javascript

HTML-Code für Multiheader-Tabellen

Artikel empfehlen

Fortgeschrittene Techniken zur Verwendung von CSS (im tatsächlichen Kampf verwendet)

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

Durch das flexible Layout können Unterelemente ihre eigene Höhe beibehalten

WeChat-Applet implementiert Formularüberprüfung

So verwenden Sie Docker Swarm zum Erstellen von WordPress

Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht

So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu

Apache Log4j2 meldet eine Sicherheitslücke auf Nuklearebene und eine schnelle Lösung

CSS Polarkoordinaten Beispielcode

Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation

mysql5.7 Benutzerberechtigung erstellen Benutzer löschen Berechtigung widerrufen

Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite

Detaillierte Erläuterung des Rundungsgenauigkeitsproblems der toFixed () -Methode in JS

CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion

Linux verwendet den Befehl lsof, um den Status des Dateiöffnens zu überprüfen