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
Proxy_pass-Methode in mehreren if in Nginx-Standorten
1. Lassen Sie uns zunächst das relevante Wissen z...
So fragen Sie einen Datensatz in MySQL ab, auf welcher Seite der Paging-Seite
Vorwort In der Praxis kann es zu folgendem Proble...
Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)
Vorwort: Als Gigant in der IT-Branche ist Microso...
Konfigurationsmethode für die SystemC-Umgebung unter Linux
Das Folgende ist die Konfigurationsmethode unter ...
So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei
Vorwort Nginx ist ein auf Leistung ausgelegter HT...
JavaScript implementiert die asynchrone Übermittlung von Formulardaten
In diesem Artikelbeispiel wird der spezifische Ja...
So löschen Sie node_modules und installieren es neu
Inhaltsverzeichnis Schritt 1: Installieren Sie no...
jQuery benutzerdefinierter Lupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Vue-Übergangseffekte und Anwendungsbeispiele für Animationsübergänge
Inhaltsverzeichnis Übergangs-Hook-Funktion Benutz...
Eine kurze Erläuterung verschiedener Möglichkeiten zum Übergeben von Parametern beim React-Routing
Die erste Methode zur Parameterübergabe ist die d...
Detaillierte Einführung zum MySQL-Cursor
Inhaltsverzeichnis 1. Was ist ein Cursor? 2. So v...
Detaillierte Erklärung des Prinzips der Docker-Image-Schichtung
Basisbild Das Basisbild hat zwei Bedeutungen: Ist...
Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten
In diesem Artikelbeispiel wird der spezifische Co...
Installieren Sie die Befehlsfunktionen „Zip“ und „Unzip“ unter Linux und CentOS (Server).
Installieren Sie die Zip-Dekomprimierungsfunktion...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS
Vorwort Hier sind die Schritte zur Installation u...