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
Grafisches Tutorial zur Installation der neuesten Version des MySQL-Servers unter Windows 7 64 Bit
In letzter Zeit habe ich die MySQL-Datenbank unte...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete von MySQL 5.7.17
Da es im Internet nur wenige und unzureichende In...
Führen Sie die Initialisierungs-SQL aus, wenn Docker MySQL startet
1. Ziehen Sie das Mysql-Image docker pull mysql:5...
Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert
Nach der Konfiguration der TabBar im WeChat-Apple...
js zur Realisierung eines einfachen Puzzlespiels
In diesem Artikel wird der spezifische Code von j...
Analyse des Parameterübertragungsprozesses des Treibermoduls in Linux
Deklarieren Sie den Parameternamen, den Typ und d...
Detaillierte Erläuterung der Überwachung der NVIDIA GPU-Nutzung unter Linux
Bei der Verwendung von TensorFlow für Deep Learni...
Das Phänomen des Margin-Top-Collapses und die spezifische Lösung
Was ist ein Margin-Top-Collaps? Der Margin-Top-Co...
Implementierung der Docker-Konfigurationsänderung des Alibaba Cloud-Image-Repository
Das Docker-Repository selbst ist sehr langsam, ab...
Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue
1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...
Wie werden Leerzeichen in HTML dargestellt (was bedeuten sie)?
Bei der Webentwicklung stößt man häufig auf Zeiche...
Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers
Verwenden Sie CSS, um den Stil der Bildlaufleiste...
Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten
Inhaltsverzeichnis Hintergrund analysieren Datens...
Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker
https://docs.microsoft.com/en-us/windows/wsl/wsl-...
Beispielcode des Spread-Operators und seiner Anwendung in JavaScript
Der Spread-Operator ermöglicht die Erweiterung ei...