JavaScript zum Erreichen eines einfachen Message Board-Falls
|
Verwenden Sie Javascript, um ein Message Board-Beispiel (mit Nachrichtenlöschung) zu Ihrer Referenz zu implementieren. Der spezifische Inhalt ist wie folgt Ich lerne immer noch das große Frontend. Bitte verzeihen Sie mir, wenn der Code Unregelmäßigkeiten oder falsche Ideen enthält. Vielen Dank für Ihren Rat. Im Diskussionsbereich einiger Websites können wir normalerweise die Message Board-Funktion sehen. Wenn Benutzer dann Kommentare abgeben, können keine leeren Kommentare gepostet werden. Die neuesten Kommentare werden angezeigt und die alten Kommentare werden nach unten verschoben. Dann kann der Blogger die Kommentare löschen. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
Körper {
Polsterung: 100px;
}
Textbereich {
Breite: 200px;
Höhe: 100px;
Rand: 1px durchgehend rosa;
Gliederung: keine;
Größenänderung: keine;
}
ul {
Rand oben: 50px;
}
li {
Listenstil: keiner;
Breite: 300px;
Polsterung: 5px;
Hintergrundfarbe: RGB (245, 209, 243);
Farbe: rot;
Schriftgröße: 14px;
Rand: 15px 0;
}
li ein {
schweben: rechts;
Textdekoration: keine;
}
</Stil>
</Kopf>
<Text>
<textarea name="" id=""></textarea>
<button>Veröffentlichen</button>
<ul>
</ul>
<Skript>
var btn = document.querySelector('Schaltfläche')
var Textbereich = document.querySelector('Textbereich')
var ul = document.querySelector('ul')
btn.onclick = Funktion () {
wenn (Textbereich.Wert == '') {
alert('Ning hat keine Eingabe')
return false
}anders{
var li = document.createElement('li')
li.innerHTML=textarea.value+"<a href='javascript:;'>Löschen</a>"
ul.insertBefore(li,ul.children[0])
var as=document.querySelectorAll('a')
für (var i=0;i<as.length;i++){
als[i].onclick=Funktion () {
ul.removeChild(dieser.übergeordneteKnoten)
}
}
}
}
</Skript>
</body>
</html>Effektanzeige Wenn der Kommentar leer ist:
Neue Kommentare verdrängen alte Kommentare nach unten:
Beim Löschen:
Code Erklärung Wenn hier das Ereignis „Klicken auf die Schaltfläche“ ausgelöst wird, wird der Inhalt im Textfeld abgerufen, die Funktion wird ausgelöst und zunächst wird beurteilt, ob der Wert des Textfelds leer ist. Wenn dies der Fall ist, wird ein Warnfeld angezeigt und der Textinhalt wird unten nicht angezeigt. Wenn das Textfeld Inhalt hat, erstellen Sie ein Element li und verwenden Sie li, um ' zu empfangen. Setzen Sie dann den Textinhalt in li auf den Inhalt von 1 im Textbereich + ein Tag (Löschfunktion). Legen Sie dann fest, dass das neu hinzugefügte li vorne angezeigt werden soll, also „insertbefore“. Dann müssen wir das A-Tag in einer Schleife binden, sodass die Zeile gelöscht wird, wenn auf das A-Tag geklickt wird. 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:
|
<<: Tutorial zur Installation und Verwendung von Docker MQTT
>>: Einführung in Jenkins und wie man Jenkins mit Docker bereitstellt
Artikel empfehlen
JavaScript-Canvas zum Erzielen eines Regentropfeneffekts
In diesem Artikelbeispiel wird der spezifische Co...
Vue implementiert das Hoch- und Herunterladen von Dateien
In diesem Artikelbeispiel wird der spezifische Co...
Realisierung der Echtzeit-Dateisynchronisierung zwischen Linux-Servern
Anwendungsszenarien Bei vorhandenen Servern A und...
Alibaba Cloud Centos7 Installation und Konfiguration von SVN
1. SVN-Server installieren yum installiere Subver...
Grundlegende Anwendungsbeispiele für benannte Slots in Vue
Vorwort Benannte Slots werden mithilfe des Attrib...
Acht Beispiele, wie Vue Komponentenkommunikation implementiert
Inhaltsverzeichnis 1. Props übergeordnete Kompone...
Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt
Heute geht es noch immer um das Design von Watch-...
Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008
Upgrade-Hintergrund: Um die Sicherheitslücke in d...
Zusammenfassung der wichtigsten Docker-Befehle für Entwickler
Inhaltsverzeichnis Einführung in Docker Installat...
Einführung und Architektur von Apache Arrow, einem leistungsstarken Datenformatbibliothekspaket auf JVM (Gkatziouras)
Apache Arrow ist ein beliebtes Format, das von ve...
MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest
1. Neuen Benutzer anlegen: 1. Führen Sie eine SQL...
Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL
1 Ursache Nachdem das Projekt die Datenbank migri...
MySQL-Anmelde- und Beendigungsbefehlsformat
Das Befehlsformat für die MySQL-Anmeldung ist: my...
Detailliertes Beispiel für SpringBoot + nginx zum Erreichen der Ressourcen-Upload-Funktion
Vor Kurzem habe ich gelernt, mit Nginx statische ...