Natives JavaScript-Message Board

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung des Message Boards zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung:

Code:

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="UTF-8">
 <Titel></Titel>
 <Stil>
 #txt2{
 Breite: 400px;
 Höhe: 50px;
 Rand oben: 5px;
 }
 #span1{
 Rand links: 200px;
 }
 #Kasten{
 Breite: 400px;
 /*Höhe: 400px;*/
 /*Rahmen:1px durchgehend grau;*/
 }
 #Box .Artikel{
 Höhe: 80px;
 Rahmen unten: gestrichelt 1px hellgrau
 }
 #box .c1{
 Höhe: 30px;
 }
 #box .c1 span{
 schweben: links;
 }
 #box .c1 a{
 schweben: rechts;
 Rand rechts: 20px;
 Textdekoration: keine;
 Farbe: Schwarz;
 }
 
 </Stil>
 </Kopf>
 <Text>
 <div>
 Sag etwas...
 </div>
 <div>
 <input type="text" placeholder="Hong Qigong" id="txt1"/>
 </div>
 <div>
 <textarea name="" id="txt2" maxlength="10"></textarea>
 </div>
 <div id="div3">
 <span id="span1">Sie können auch <span id="span2">10</span> Zeichen eingeben</span>
 <input type="button" value = "Veröffentlichen" id="btn"/>
 </div>
 <div>
 <div>Alle reden</div>
 </div>
 <div id="box">
 <div Klasse = "Artikel">
 <div Klasse = "c1">
  <span>Qiao Feng:</span>
  <span>Heute............</span>
  <a href = "#">Löschen</a>
 </div>
 <div>01. Januar 4. 01:28</div>
 </div>
 <div Klasse = "Artikel">
 <div Klasse = "c1">
  <span>Qiao Feng:</span>
  <span>Heute............</span>
  <a href = "#">Löschen</a>
 </div>
 <div>01. Januar 4. 01:28</div>
 </div>
 </div>
 </body>
 <Skripttyp="text/javascript">
 //Schaltfläche abrufen var btn = document.getElementById("btn");
 var box = document.getElementById("box");
 var txt1 = document.getElementById("txt1");
 var txt2 = document.getElementById("txt2");
 
 btn.onclick = Funktion () {
 //konsole.log(dies);
 var divItem = document.createElement("div");
 divItem.className = "Item";
 //box.appendChild(divItem);//Knoten anhängenbox.insertBefore(divItem, box.firstChild);//Knoten einfügenvar div1 = document.createElement("div");
 div1.Klassenname = "c1";
 var div2 = document.createElement("div");
 divItem.appendChild(div1);
 divItem.appendChild(div2);
 
 //Inhalt des ersten Div festlegen var span1 = document.createElement("span");
 div1.appendChild(span1);
 span1.innerHTML = txt1.Wert + " : ";
 
 var span2 = document.createElement("span");
 div1.appendChild(span2);
 span2.innerHTML = txt2.Wert;
 
 var a = document.createElement("a");
 a.href = "#";
 a.innerHTML = "löschen";
 div1.appendChild(a);
 //a's Löschereignis a.onclick = function () {
  dies.parentNode.parentNode.entfernen();
 }
 
 var date = neues Datum();
 //var str = date.toLocaleString();
 var m = date.getMonth() + 1;
 var d = date.getDate();
 var h = date.getHours();
 var m2 = date.getMinutes();
 m = Spaß1(m);
 d = Spaß1(d);
 h = Spaß1(h);
 m2 = spaß1(m2);
 
 var str = m + "Monat" + d + "Tag" + h + ":" + m2;
 
 div2.innerHTML = str;
 
 }
 
 //Kapselung einer Datumsformatierungsfunktion function fun1(x) {
 wenn (x < 10) {
  gebe "0" + x zurück;
 }
 gebe x zurück;
 }
 
 var span2 = document.getElementById("span2");
 txt2.onkeyup = Funktion () {
 var str = dieser.Wert;
 console.log(str.length);
 span2.innerHTML = 10 - str.Länge;
 }
 


 </Skript>
</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 Message Board-Funktion
Quellcode des JSP-Message Boards drei: für JSP-Anfänger.
So verwenden Sie DOM-Operationen, um ein einfaches Message Board in js zu implementieren
JS+CSS simuliert eine Message Board-Instanz, die Inhalte ohne Aktualisierung anzeigen kann
JS realisiert die Message Board-Funktion [Bodeneffektanzeige]
Faltbares Message Board, implementiert durch js (mit Quellcode-Download)
JSP-Message-Board-Quellcode 2: für JSP-Anfänger.
Mein Ajax-Message-Board-Quellcode, gute Anwendung js
Codebeispiel zum Schreiben eines Message Boards mit ReactJS und dem Flask-Framework von Python
Quellcode 1 des JSP-Message Boards: für JSP-Anfänger.

<<: JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung

>>: Implementierung eines Karussells mit nativem JavaScript