JS erkennt den Fall der Eliminierung von Sternen

In diesem Artikelbeispiel wird der spezifische JS-Code zum Entfernen von Sternen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Die Wirkung zerstörender Sterne:

Funktionale Anforderungen:

1. Klicken Sie auf den Stern und er verschwindet.
2. Jede Sekunde automatisch einen Stern generieren
3. Die Größe und Position der Sterne sind zufällig

Fallcode und Analyse:

HTML- und CSS-Code:

 * {
        Rand: 0;
        Polsterung: 0;
        Box-Größe: Rahmenbox;
    }
 
    div {
        Position: relativ;
        Breite: 1000px;
        Höhe: 500px;
        Rand: 100px automatisch;
        Hintergrundfarbe: schwarz;
    }
</Stil>
 
<Text>
    <div>
 
    </div>

• Im Body benötigen wir nur ein Div, um unsere zufällig generierten Sterne zu speichern
• Die Div-Box muss eine Position haben (die zufällige Position der Sterne basiert auf den linken und oberen Werten der Position).
  

JS-Code:

var div = document.querySelector('div');//Div-Box abrufen Funktion creatImg(num) {
            for (var i = 0; i < num; i++) { //Anzahl Sterne zufällig generieren var imgs = document.createElement('img'); //Img-Tag erstellen imgs.style.position = 'absolute'; //Absolute Positionierung zum Sternbild hinzufügen var width = Math.floor(Math.random() * (50 - 10 + 1) + 10);
                var height = width; //Breite und Höhe zufällig generieren, Breite und Höhe der Sterne müssen konsistent sein var top = Math.floor(Math.random() * (450 - 0 + 1) + 0);
                var links = Math.floor(Math.random() * (950 - 0 + 1) + 0);
 
                //Ändern Sie die Werte für Breite, Höhe, links und oben des Sterns in zufällig generierte Werte imgs.style.width = width + 'px';
                imgs.style.height = Höhe + 'px';
                imgs.style.left = links + "px";
                imgs.style.top = oben + "px";
 
                //Fügen Sie den Link des Sternbildes zum Img-Tag hinzu imgs.src = 'images/xingxing.gif';
            
                //Fügen Sie das erstellte img-Tag zum Div-Feld hinzu div.appendChild(imgs);
            }
        }

Hinweis: Wenn Sie Eigenschaften mit Einheiten wie „Breite“ und „Links“ ändern, achten Sie darauf, die Einheiten hinzuzufügen.

creatImg(5); //Funktion aufrufen und fünf Sterne generieren setInterval(function () { //Code alle 1s ausführen var img = document.querySelectorAll('img'); //Sternbild abrufen //Jedem Stern ein Klickereignis hinzufügen for (var i = 0; i < img.length; i++) {
                img[i].addEventListener('klicken', function () {
                    //Lösche das angeklickte Bild nach dem Klicken
                    div.entfernenKind(dieses);
                })
            }
            erstellenImg(1);
        }, 1000);

Beim Abrufen des Bildes werden alle Sternbilder in der Div-Box angezeigt, nicht nur ein einzelnes

Nachdem die Bilder erfasst wurden, liegen sie in Form eines Pseudo-Arrays vor, sodass Sie Klickereignisse durch Durchlaufen einzeln binden können.

Im Fall verwendete JS-Wissenspunkte: (im Fall werden die mit Farbe verwendeten verwendet)

Knotenbetrieb

Knoten erstellen

Dokument.Element erstellen()
Dokument.ErstellenTextNode()
Dokument.ErstellenTextNode()

Knoten hinzufügen

node.appendCild(child) (Element anhängen)
node.insertBefore (neues untergeordnetes Element, Position des einzufügenden Elements)

Knoten löschen

node.removeChild(child) Löscht einen untergeordneten Knoten im übergeordneten Element.

Stilattributoperationen

Element.Stil

1.element.style.backgroundColor = "rot";
2. Die Stile in JS verwenden Camel-Case-Benennungen
3. JS ändert den Stilvorgang, der Inline-Stile generiert, und das CSS-Gewicht ist relativ hoch

element.klassenname

1. Anwendbar auf Situationen mit vielen Stilen oder komplexen Funktionen
2. className ändert direkt den Klassennamen des Elements und überschreibt den ursprünglichen Klassennamen
3. Sie können mehrere Klassennamenselektoren verwenden

Timer

window.setTimeout(call function, [Anzahl der zu verzögernden Millisekunden]);

1. Wir nennen die aufrufende Funktion von setTimeout() auch als Callback-Funktion
2. Fenster kann weggelassen werden
3. Diese aufrufende Funktion kann die Funktion oder den Funktionsnamen direkt schreiben oder die Zeichenfolge „Zeichenname“ übernehmen.
4. Der Standardwert der Verzögerung in Millisekunden ist 0, wenn sie weggelassen wird. Die Einheit muss Millisekunden sein.
5. Es kann viele Timer geben, und dem Timer wird häufig eine Kennung zugewiesen
6. Nur einmal ausführen

window.setInterval (Funktion aufrufen, [Anzahl der Millisekunden, die verzögert werden sollen]);

1. Wir nennen die aufrufende Funktion von setTimeout() auch als Callback-Funktion
2. Fenster kann weggelassen werden
3. Diese aufrufende Funktion kann die Funktion oder den Funktionsnamen direkt schreiben oder die Zeichenfolge „Zeichenname“ übernehmen.
4. Der Standardwert der Verzögerung in Millisekunden ist 0, wenn sie weggelassen wird. Die Einheit muss Millisekunden sein.
5. Es kann viele Timer geben, und dem Timer wird häufig eine Kennung zugewiesen
6. Wiederholen

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.