js zur Realisierung der Web-Message-Board-Funktion

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 +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ 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 +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ 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:
  • Prinzip der Ereignisdelegierung in JavaScript
  • Detaillierte Erklärung der JS-Ereignisdelegation
  • Eine kurze Analyse von Beispielen für Ereignisdelegation in JS
  • JavaScript zum Implementieren der Web-Message-Board-Funktion
  • Native JS-Implementierung des Message Boards
  • In diesem Artikel erfahren Sie, wie Sie mithilfe der Ereignisdelegierung die Message Board-Funktion in JavaScript implementieren

<<:  JS realisiert den Effekt des Bildwasserfallflusses

>>:  So deinstallieren und installieren Sie Tomcat neu (mit Bildern und Text)

Artikel empfehlen

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

Grafische Erklärung des MySQL-Abfragecaches

Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...

Einführung in die grundlegenden TypeScript-Typen

Inhaltsverzeichnis 1. Grundtypen 2. Objekttyp 2.1...

Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...

Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“

Frage Die feste CSS-Positionierung position:fixed...

Detaillierte Erklärung der Kontrolle des Zugriffsvolumens durch Nginx

Zweck Machen Sie sich mit den Nginx-Modulen ngx_h...

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

1. Warm und sanft Zugehörige Adresse: http://www.w...

Zusammenfassung der 10 gängigen HBase-Betriebs- und Wartungstools

Zusammenfassung: HBase verfügt über zahlreiche Be...

So verwenden Sie Cron-Jobs, um PHP regelmäßig unter Cpanel auszuführen

Öffnen Sie das cPanel-Verwaltungs-Backend. Unter ...

So installieren Sie den Chrome-Browser auf CentOS 7

Dieser Artikel beschreibt, wie Sie den Chrome-Bro...

Tools zum Konvertieren statischer Websites in RSS

<br /> Dieser Artikel wurde von Rachel Golds...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...

Vue implementiert ein verschiebbares Baumstrukturdiagramm

Inhaltsverzeichnis Rekursive Vue-Komponente Drag-...

js zum Aufrufen der Netzwerkkamera und Behandeln häufiger Fehler

Vor kurzem musste ich aus geschäftlichen Gründen ...

Beispiele für JavaScript-Operationselemente

Weitere Informationen zu Bedienelementen finden S...