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
So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS
Inhaltsverzeichnis Lassen Sie uns zunächst über d...
CSS-Rahmen fügt Implementierungscode für vier Ecken hinzu
1.html <div Klasse="loginbody"> &...
Detaillierte Erklärung der beiden Modi des Router-Routings in Vue: Hash und Verlauf
Hash-Modus (Standard) Funktionsprinzip: Überwache...
7 Fähigkeiten, die Webdesigner haben müssen
Webdesign ist sowohl eine Wissenschaft als auch e...
Linux: Beispiel für das Bearbeiten des Start-, Stopp- und Neustartskripts für Springboot-JAR-Pakete
Vorwort In der Springboot-Konfigurationsdatei hab...
MySQL-Tabellenübergreifende Abfrage und Tabellenübergreifende Aktualisierung
Freunde, die über Grundkenntnisse in SQL verfügen...
Tomcat-Konfiguration und wie man ihn in Eclipse startet
Inhaltsverzeichnis So installieren und konfigurie...
Anwendung von CSS3-Animationseffekten in Aktivitätsseiten
Hintergrund Ehe wir uns versehen, neigt sich ein ...
Verwendung von MySQL DDL-Anweisungen
Vorwort Die Sprachklassifikation von SQL umfasst ...
So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
Standort / { Index Index.jsp; Proxy_next_upstream...
Analyse des Prinzips von Nginx + Tomcat zur Erreichung eines Lastausgleichs sowie einer dynamischen und statischen Trennung
1. Implementierungsprinzip des Nginx-Lastausgleic...
Ergänzender Artikel zur Front-End-Performance-Optimierung
Vorwort Ich habe mir die zuvor veröffentlichten A...
Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme
Hintergrund Das Lösen von Browserkompatibilitätsp...
Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt
1. Grundlegende Verwendung <!DOCTYPE html> ...
Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
1. Einleitung Gilt es als Aufwärmen alter Themen,...