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:
|
<<: JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung
>>: Implementierung eines Karussells mit nativem JavaScript
Artikel empfehlen
Zusammenfassung der allgemeinen Quellkonfiguration von Spiegelbildern für Linux-Distributionen
Ich habe mich kürzlich mit Linux beschäftigt und ...
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen
Offizielle Website: http://code.google.com/p/zen-c...
Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung
Inhaltsverzeichnis Domänenübergreifende Gründe JS...
Zwei Möglichkeiten zum Erstellen von Docker-Images
Inhaltsverzeichnis Aktualisieren Sie das Bild von...
Implementierung der Docker-Container-Statuskonvertierung
Ein Zustandsübergangsdiagramm eines Docker-Contai...
Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann
<frameset></frameset> ist jedem bekann...
Vue implementiert einen Wasserfallfluss mit unendlichem Laden
In diesem Artikelbeispiel wird der spezifische Co...
Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt
Inhaltsverzeichnis 1.Linux-Anmeldeschnittstelle 2...
Informationen zur Docker-Sicherheit Probleme mit der Docker-TLS-verschlüsselten Kommunikation
Inhaltsverzeichnis 1. Sicherheitsprobleme mit Doc...
Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS
Ergebnisse erzielen Schritt 1. Ursprüngliche inde...
Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm
Vorwort Dieser Artikel ist lediglich eine einfach...
So zeigen Sie die Ausführungszeit von SQL-Anweisungen in MySQL an
Inhaltsverzeichnis 1. Erste SQL-Vorbereitung 2. M...
Implementierung der schnellen Projektkonstruktion von vue3.0+vant3.0
Inhaltsverzeichnis 1. Projektkonstruktion 2. Vue3...
Implementierung der Nginx-Domänennamenweiterleitung für den HTTPS-Zugriff
Ein Wort vorab: Plötzlich erhielt ich die Aufgabe...