Fügen Sie Javascript für die Schaltfläche „Schließen' hinzu

Wie füge ich einer Webseite eine Schaltfläche zum Schließen hinzu? Dies mag eine oft übersehene Anforderung sein, aber in Wirklichkeit müssen Benutzer eine Webseite, die viele Informationen enthält, diese möglicherweise nach einer Weile schließen. Insbesondere auf Mobilgeräten, auf denen Benutzer aufgrund kleinerer Bildschirme nur ungern scrollen, ist es wahrscheinlicher, dass sie die Seite schließen, anstatt zusätzliche Zeit mit dem Lesen des Inhalts zu verbringen. Einige Webdesigner glauben, dass das Hinzufügen einer Schaltfläche zum Schließen in der oberen linken Ecke der Seite zu einer besseren Benutzererfahrung beiträgt. Daher stellen wir in diesem Artikel vor, wie Sie mit JavaScript eine einfache Schaltfläche zum Schließen hinzufügen.

1. Erstellen Sie ein Schaltflächenelement zum Schließen

Im ersten Schritt müssen wir ein Schaltflächenelement zum Schließen erstellen. In HTML können wir das Button-Element verwenden, um eine Schaltfläche zu erstellen und ihr ein ID-Attribut zu geben. In CSS können wir den Stil der Schaltfläche definieren, z. B. die Position, Größe und Farbe der Schaltfläche festlegen. Der Code lautet wie folgt:

HTML

<button id="close-button">关闭</button>

CSS

#close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #f00;
  color: #fff;
  cursor: pointer;
}

2. JavaScript-Code hinzufügen

Als nächstes müssen wir JavaScript-Code hinzufügen. Zuerst müssen wir das Schaltflächenelement „Schließen“ abrufen und ihm dann einen Ereignis-Listener hinzufügen. Wenn der Benutzer auf die Schaltfläche klickt, wird dieser Ereignis-Listener ausgelöst und führt eine Funktion aus, die die aktuelle Seite schließt. Der Code lautet wie folgt:

JavaScript

var closeButton = document.getElementById('close-button');
closeButton.addEventListener('click', function() {
  window.close();
});

In diesem Beispiel verwenden wir die close()-Methode des Fensterobjekts in JavaScript, um die aktuelle Seite zu schließen.

3. Testen und passen Sie den Stil an

Jetzt können wir die Webseite öffnen und sehen, ob die Schaltfläche zum Schließen ordnungsgemäß funktioniert. Wenn nach dem Klicken auf die Schaltfläche die Webseite geschlossen wird und zur Startseite des Browsers zurückkehrt oder eine neue Seite geöffnet wird, bedeutet dies, dass die Schaltfläche zum Schließen erfolgreich festgelegt wurde.

Schließlich können wir den Stil der Schließen-Schaltfläche entsprechend anpassen, z. B. die Farbe oder Größe ändern oder einige Symbole hinzufügen usw. Nach Abschluss dieser Vorgänge können wir die Webseite veröffentlichen und für Benutzer freigeben.

Kurz gesagt ist es bei der Entwicklung von Webanwendungen sehr wichtig, den Benutzern ein besseres Benutzererlebnis zu bieten. Das Hinzufügen einer einfachen Schaltfläche zum Schließen erleichtert Benutzern nicht nur das Schließen der Seite, sondern macht die Nutzung der App auch effizienter. Hoffentlich haben Sie nach dem Lesen dieses Artikels gelernt, wie Sie mithilfe von JavaScript eine Schaltfläche zum Schließen hinzufügen.

Das obige ist der detaillierte Inhalt vonFügen Sie Javascript für die Schaltfläche „Schließen' hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!