In diesem Artikel erfahren Sie, wie Sie mithilfe der Ereignisdelegierung die Message Board-Funktion in JavaScript implementieren
|
Verwenden Sie die Ereignisdelegierung, um die Message Board-Funktionalität zu implementieren.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
Körper {
Breite: 100 %;
Höhe: 100%;
Hintergrund: rgb(65, 65, 63);
}
.Hintergrund {
Breite: 700px;
Höhe: 100%;
Hintergrund: weiß;
Rand: automatisch;
Rand oben: 20px;
}
.Kopf,
.Pop-Kopf {
Höhe: 50px;
Schriftgröße: 20px;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
}
.Name {
Breite: 640px;
Höhe: 40px;
Schriftgröße: 20px;
Rand: 10px 28px;
Zeilenhöhe: 50px;
Rahmenradius: 8px;
Rand: 2px durchgezogenes RGB (139, 137, 137);
Gliederung: keine;
}
.Inhalt,
.pop-Antwort {
Breite: 640px;
Höhe: 150px;
Schriftgröße: 22px;
Rand: 10px 28px;
Rand: 2px durchgezogenes RGB (139, 137, 137);
Gliederung: keine;
Rahmenradius: 8px;
Größenänderung: keine;
}
.btn,
.pop-btn {
schweben: rechts;
Höhe: 30px;
Rand rechts: 28px;
Rahmenradius: 6px;
Gliederung: keine;
Schriftgröße: 20px;
Polsterung: 0 20px;
Hintergrund: rgb(169, 238, 255);
}
h3 {
Schriftgröße: 20px;
Farbe: rgb(102, 102, 102);
Hintergrund: rgb(205, 221, 248);
Rand oben: 50px;
Zeilenhöhe: 50px;
Texteinzug: 30px;
Schriftstärke: 545;
}
li {
Listenstil: keiner;
Breite: 640px;
Schriftgröße: 22px;
Rand: 15px 30px;
}
.Nachrichtenkopf {
Anzeige: Flex;
}
.Nachrichtenkopf .Foto {
Breite: 70px;
Höhe: 70px;
Hintergrund: rgb(6, 109, 134);
Anzeige: Inline-Block;
Randradius: 50 %;
Textausrichtung: zentriert;
Zeilenhöhe: 70px;
Überlauf: versteckt;
}
.Nachrichtenkopf .Zeit {
Rand links: 12px;
}
.liuyan,
.Antwort p {
Breite: 560px;
/* Höhe: 76px; */
Zeilenhöhe: 50px;
Anzeige: Block;
Hintergrund: rgb(205, 221, 248);
Schriftgröße: 20px;
Rand links: 80px;
Rahmenradius: 8px;
Texteinzug: 15px;
}
.löschen {
Breite: 60px;
Höhe: 30px;
Anzeige: Block;
Zeilenhöhe: 30px;
Rand links: 580px;
/* Rand unten: 0px; */
Rahmenradius: 6px;
Gliederung: keine;
Schriftgröße: 15px;
Hintergrund: rgb(169, 238, 255);
}
.Antwort {
Breite: 60px;
Höhe: 30px;
Anzeige: Block;
Zeilenhöhe: 30px;
Rand oben: -29px;
Rand links: 515px;
Rahmenradius: 6px;
Gliederung: keine;
Schriftgröße: 15px;
Hintergrund: rgb(169, 238, 255);
}
.popup {
Breite: 100vw;
Höhe: 100vh;
Position: fest;
Hintergrund: rgba(0, 0, 0, .3);
links: 0;
oben: 0;
Z-Index: 10;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Anzeige: keine;
}
.pop-Inhalt {
Breite: 700px;
Hintergrund: #fff;
Rahmenradius: 10px;
Überlauf: versteckt;
Polsterung unten: 20px;
}
.Antwort p {
Rand oben: 10px;
Hintergrund: rgba(100, 100, 100, .1);
}
</Stil>
</Kopf>
<Text>
<div Klasse="Hintergrund">
<div class="head">Nachrichtenbrett</div>
<input class="name" type="text" placeholder="Bitte geben Sie Ihren Spitznamen ein">
<textarea class="content" placeholder="Bitte sprechen Sie zivilisiert..."></textarea>
<button class="btn">Hinterlasse eine Nachricht</button>
<h3>Was die Leute sagen</h3>
<ul Klasse="Text">
<!-- <li>
<div Klasse="Nachrichtenkopf">
<span class="foto">System</span>
<p class="time">27.9.2019 0:47:38</p>
</div>
<p class="liuyan">Testnachricht</p>
<div Klasse="Antwort">
<p>Testantwort</p>
</div>
<button class="delete">Löschen</button>
<button class="answer">Antwort</button>
</li> -->
</ul>
</div>
<div Klasse="Popup">
<div Klasse="Pop-Inhalt">
<div class="pop-head">Antworttafel</div>
<textarea class="pop-reply" placeholder="Bitte sprechen Sie zivilisiert..."></textarea>
<button class="pop-btn huiFu">Antworten</button>
<button class="pop-btn quXiao">Abbrechen</button>
</div>
</div>
<Skript>
//Bei der Ereignisdelegierung ist jedes if gleichbedeutend mit einer unabhängigen Funktion, da jeder Klick die Ereignisverarbeitungsfunktion erneut auslöst. var oAns;
//Analyse: An wen wird die Veranstaltung delegiert? --- Gemeinsames übergeordnetes Element document.onclick = function (e) {
//Ereignisverarbeitungsobjekt, kompatibel mit IE8 und niedrigeren Browserversionen e = e || event;
// Ziel Ziel --- welches Tag es auslöst var target = e.target;
//Hinterlasse eine Nachricht if(target.className === 'btn'){
//Objekt abrufen var nickname = $('.name').value;
var Inhalt = $('.inhalt').Wert;
//Beurteilen, ob die Eingabe leer ist, if(nickname && content){
//Ein Tag erstellen var oLi = document.createElement('li');
//Neuen Inhalt einfügen oLi.innerHTML = `
<div Klasse="Nachrichtenkopf">
<span class="foto">${Spitzname}</span>
<p class="time">27.9.2019 0:47:38</p>
</div>
<p class="liuyan">${Inhalt}</p>
<div Klasse="Antwort">
</div>
<button class="delete">Löschen</button>
<button class="answer">Antwort</button>
`
//Füge die neueste Nachricht oben ein $('.text').insertBefore(oLi , $('.text').firstChild);
//Countdown-Uhr (Ziel, 3);
// Löschen Sie den Inhalt des Message Boards, nachdem Sie eine Nachricht hinterlassen haben $('.content').value = '';
}anders{
alert('Eingabe darf nicht leer sein!')
}
zurückkehren
}
//löschenwenn(target.className === 'löschen'){
//Löschen Sie die Nachrichttarget.parentNode.remove();
zurückkehren
}
//Antworten wenn(target.className === 'answer'){
//Popup-Fenster anzeigen$('.popup').style.display = 'flex';
//Suchen Sie den Ort, an dem auf die Nachricht geantwortet werden kann. oAns = target.previousElementSibling.previousElementSibling;
zurückkehren
}
//Antwort bestätigen if(target.className === 'pop-btn huiFu'){
//Antwortinhalt abrufen var huiFuContent = $('.pop-reply').value;
wenn(huiFuContent){
//Ein Tag erstellen var oP = document.createElement('p');
//Inhalt in das Tag einfügen oP.innerHTML = huiFuContent;
//Antwort in den Nachrichtenbereich einfügen oAns.appendChild(oP);
}
//Popup-Fenster schließen$('.popup').style.display = 'none';
zurückkehren
}
//Antwort abbrechenif(target.className === 'pop-btn quXiao'){
$('.popup').style.display = 'keine';
zurückkehren
}
}
//Countdown-Funktion Uhr (Element, Zeit) {
wenn(!ele.disabled){
ele.disabled = true;
ele.innerHTML = Zeit + 'Sie können nach s erneut eine Nachricht hinterlassen';
var t = setzeIntervall(Funktion () {
Zeit-- ;
ele.innerHTML = Zeit + 'Sie können nach s erneut eine Nachricht hinterlassen';
wenn(Zeit <= 0){
Löschintervall(t);
ele.disabled = false;
ele.innerHTML = 'Nachricht';
}
},1000)
}
}
//Holen Sie sich die Objektfunktion $(selector){
gibt document.querySelector(Selektor) zurück;
}
</Skript>
</body>
</html>
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: Erfahrungsaustausch durch einen Frontend-Supervisor mit 7 Jahren Praxiserfahrung
>>: Die Bedeutung der 5 Leerzeichenarten in HTML
Artikel empfehlen
Verwenden Sie Nexus als private Bibliothek, um Docker zum Hoch- und Herunterladen von Bildern zu proxyen
1. Nexus-Konfiguration 1. Erstellen Sie einen Doc...
So installieren Sie das MySQL6-Initialisierungsinstallationskennwort unter CentOS7
1. Stoppen Sie zuerst den Datenbankserver Dienst ...
Detaillierte Erklärung zur Verwendung der Linux-lseek-Funktion
Hinweis: Wenn der Artikel Fehler enthält, hinterl...
So ändern Sie die IP-Einschränkungsbedingungen des MySQL-Kontos
Vorwort Kürzlich stieß ich bei der Arbeit auf ein...
Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung
Fügen Sie in der Datei /etc/my.conf unter [mysqld...
Zwei Methoden zum Deaktivieren von Formularsteuerelementen in HTML: schreibgeschützt und deaktiviert
Beim Erstellen von Webseiten verwenden wir häufig ...
Verwenden von js, um einen Wasserfalleffekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue
Was ist Keepalive? Bei der normalen Entwicklung m...
Deinstallieren der MySQL-Datenbank unter Linux
Wie deinstalliere ich eine MySQL-Datenbank unter ...
Detaillierte Erklärung des Linux-Texteditors Vim
Vim ist ein leistungsstarker Vollbild-Texteditor ...
Beispiel für die Implementierung des Ziehens von Zeilen und Spalten in einer Elementtabelle
Das Element UI-Tabelle verfügt nicht über eine in...
Navigationsdesign und Informationsarchitektur
<br />Wenn wir über Navigation sprechen, geh...
Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode
Sinnvolle Einstellung des MySQL sql_mode sql_mode...
Wichtige Hinweise zu PHP-HTMLhtml-Wissenspunkten (unbedingt lesen)
1. Verwenden Sie Frameset, Frame und Iframe, um m...
So überwachen Sie Array-Änderungen in JavaScript
Vorwort Als ich zuvor „defineProperty“ vorgestell...