js zur Realisierung der Web-Message-Board-Funktion
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Web-Message-Boards zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. Zeichnen Sie eine Titelleiste und eine Inhaltsleiste, eine Senden-Schaltfläche und ein Message Board Stimmung:<br/> <input type="text" id="mood"/><br/> Hinweise: <br/> <textarea id="network"></textarea><br/> <button id="send">Veröffentlichen</button> <div Klasse="Verbot"></div> 2. Erhalten Sie die oben genannten Elemente dynamisch.
var Stimmung = document.getElementById ("Stimmung");
var Netzwerk = document.getElementById ("Netzwerk");
var send = document.getElementById ("senden");
var ban = document.querySelector (".ban");3. Legen Sie das Klickereignis für die Schaltfläche „Senden“ fest. Wenn Sie auf die Schaltfläche „Senden“ klicken, wird im Message Board unten der ausgefüllte Inhalt angezeigt. (1) Seien Sie geschickt im Umgang mit dem Cache localStorage() und nutzen Sie die Zeit, um zwischengespeicherte Werte abzurufen. var Zeit = neues Datum(); (2) Erstellen Sie ein JSON-Objekt, um den Wert des Titels und des Inhalts zu speichern
var shuju={
meineStimmung:Stimmung.Wert,
meinNetzwerk:Netzwerk .Wert,
now_time:time.toLocaleString() //2019/7/2 19:42:15 Uhr
};(3) Speichern Sie den Wert im JSON-Objekt und denken Sie daran, ihn mit JSON.stringify in einen String umzuwandeln. (4) Erstellen Sie eine Funktion zum Lesen des Werts, zum Abrufen des Inhalts im Cache und zur anschließenden Anzeige auf der Message Board-Oberfläche.
Funktion readdata(){
ban.innerHTML = "";
var Länge = localStorage.length - 1;
für(var i=Länge;i>=0;i--){
var k=localStorage.key(i); //Schlüsselwert abrufen var data=JSON.parse (localStorage.getItem(k)); //
konsole.log(k);
ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>";
}
}Quellcode:
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<Stil>
.Verbot{
Breite: 500px;
Höhe: automatisch;
Rand: 1px, durchgehend schwarz;
}
#schicken {
Breite: 40px;
Höhe: 25px;
Schriftgröße: 12px;
Textausrichtung: zentriert;
Zeilenhöhe: 25px;
Hintergrund: blasses Türkis;
}
</Stil>
</Kopf>
<Text>
Stimmung:<br/> <input type="text" id="mood"/><br/>
Hinweise: <br/> <textarea id="network"></textarea><br/>
<button id="send">Veröffentlichen</button>
<div Klasse="Verbot"></div>
<Skript>
var Stimmung = document.getElementById ("Stimmung");
var Netzwerk = document.getElementById ("Netzwerk");
var send = document.getElementById ("senden");
var ban = document.querySelector (".ban");
//localStorage.clear();
Daten lesen();
send.onclick = Funktion(){
var Zeit = neues Datum();
var shuju={
meineStimmung:Stimmung.Wert,
meinNetzwerk:Netzwerk .Wert,
now_time:time.toLocaleString() //2019/7/2 19:42:15 Uhr
};
// console.log(JSON.stringify (shuju));
localStorage.setItem(time.getTime(),JSON.stringify(shuju));
Stimmung.Wert="";
Netzwerk.Wert = "";
// alert("Erfolgreich veröffentlicht");
Daten lesen();
}
Funktion readdata(){
ban.innerHTML = "";
var Länge = localStorage.length - 1;
für(var i=Länge;i>=0;i--){
var k=localStorage.key(i); //Schlüsselwert abrufen var data=JSON.parse (localStorage.getItem(k)); //
konsole.log(k);
ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>";
}
}
</Skript>
</body>
</html>
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:
|
<<: JS realisiert den Effekt des Bildwasserfallflusses
>>: So deinstallieren und installieren Sie Tomcat neu (mit Bildern und Text)
Artikel empfehlen
HTML-Auszeichnungssprache - Tabellen-Tag
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini
Navicat meldet beim Verbinden mit der Datenbank d...
Detaillierte Erklärung zum Zugriff auf die MySQL-Datenbank in der virtuellen Linux-Maschine unter Windows
Virtuelle Linux-Maschine: VMware + Ubuntu 16.04.4...
So testen Sie die Netzwerkgeschwindigkeit mit JavaScript
Inhaltsverzeichnis Vorwort Zusammenfassung des Pr...
Tutorial zur Verwendung des iostat-Befehls unter Linux
Vorwort Es wird gesagt, dass sich die für Betrieb...
Nginx Reverse-Proxy-Konfiguration entfernt Präfix
Wenn Sie nginx als Reverse-Proxy verwenden, könne...
MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge
MySQL-Zeichenfolgenverkettung, -Abfangen, -Ersetz...
Docker verwendet den Prune-Befehl, um das Nicht-Image zu bereinigen
Inhaltsverzeichnis Die Entstehung und Verwirrung ...
MySQL-Zeittypauswahl
Inhaltsverzeichnis DATETIME ZEITSTEMPEL Wie man w...
MySQL weist eine Riddle-Sicherheitslücke auf, die zum Verlust von Benutzernamen und Passwörtern führen kann
Die Riddle-Sicherheitslücke, die auf die MySQL-Ve...
Was ist ein MySQL-Tablespace?
Das Thema, das ich heute mit Ihnen teilen möchte,...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe
Zwei Hauptkategorien von Indizes Verwendete Speic...
18 Sets exquisiter kostenloser Symbolmaterialien im Apple-Stil zum Teilen
Apple-Becher-Symbole und Extras HD StorageBox – Z...
Einführung in die Verwendung des Base-Link-Tags Base
<br />Wenn Sie auf den Link klicken, wird di...