Beispiele für JavaScript-Operationselemente

<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>

<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>

<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>

<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>

<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>

<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>

<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>