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
Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Natives JS zur Implementierung der E-Mail-Eingabeaufforderung im Anmeldefeld
Dieser Artikel beschreibt eine native JS-Implemen...
Detailliertes Tutorial zur Installation von MySQL 8.0.19 in der Zip-Version unter Win10
Inhaltsverzeichnis 1. Nach dem Download entpacken...
Nginx-Reverseproxy und Lastausgleichspraxis
Reverse-Proxy Unter Reverse-Proxy versteht man de...
Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns
8 Optimierungsmethoden für das MySQL-Datenbankdes...
Benutzerdefinierte optionale Zeitkalenderkomponente von Vue
In diesem Artikelbeispiel wird der spezifische Co...
So rufen Sie einen Hyperlink auf und öffnen ihn
<br />Die unzähligen Informationen im Intern...
Ein Beispiel, wie JavaScript doppelte Netzwerkanforderungen verhindern kann
Vorwort Während der Entwicklung stoßen wir häufig...
Fallstricke bei der Installation des komprimierten MySQL 8.0.18-Pakets und beim Zurücksetzen vergessener Passwörter
http://www.cppcns.com/shujuku/mysql/283231.html S...
Eine kurze Analyse der Unterschiede zwischen den häufig verwendeten Anweisungen v-if und v-show von Vue
Inhaltsverzeichnis Vorwort 1.v-show 2.v-wenn 3. D...
Shell-Skripteinstellungen zum Verhindern von Brute-Force-SSH
Das Shell-Skript richtet die Zugriffskontrolle ei...
Analyse des Problems des Datenverlusts durch erzwungene Aktualisierung von Vuex
vuex-persistenter Zustand Kernprinzip: Alle Vuex-...
So implementieren Sie das Abfangen von URIs im Nginx-Standort
veranschaulichen: Stamm und Alias im Standort D...
React implementiert den Beispielcode der Radiokomponente
Ziel dieses Artikels ist es, die Grundfunktionen ...
So konfigurieren Sie Nginx, um die Zugriffshäufigkeit derselben IP zu begrenzen
1. Fügen Sie den folgenden Code zu http{} in ngin...