Implementierung der HTML-Befehlszeilenschnittstelle

Implementierung der HTML-Befehlszeilenschnittstelle
HTML-Teil

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<Kopf>
<meta charset="utf-8" />
<title>WeChat-Manager</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js">
</Skript>
<Skript>
$(Dokument).bereit(Funktion(){
$(Dokument).keyup(Funktion(Ereignis){
wenn(event.keyCode == 13){
$.ajax({
Typ: "POST",
URL: "ok.php",
Daten: "code="+$("#in").val(),
Erfolg: Funktion (Nachricht) {
$("ul").append("<li>"+$("#in").val()+"</li>"); // Gib die Eingabe an die Schnittstelle aus
$("ul").append("<li>"+msg+"</li>"); //Rückgabewert und Ausgabe abrufen
$("#in").val(""); //Eingabefeld löschen
$("#text").scrollTop($("#text").scrollTop()+32); //Scrollen Sie die Leiste nach unten, um das Eingabefeld anzuzeigen
}
});
}
});
$("#in")[0].fokus();
});
</Skript>
</Kopf>
<Text>
<div Klasse="Fenster">
<div Klasse="Titel">
<img src="css/1.jpg">
<span>WeChat-Tipps</span>
</div>
<div id="text">
<ul>
<li>Willkommen...</li>
<li>Anmelden:</li>
</ul>
<Eingabetyp="text" Name="" ID="in">
</div>
</div>
</body>
</html>

CSS-Teil

Code kopieren
Der Code lautet wie folgt:

@Zeichensatz "utf-8";
Körper {
Hintergrundfarbe: #396DA5;
Rand: 0px;
Polsterung: 0px;
Farbe: #fff;
Schriftart: „Microsoft YaHei“;
Schriftgröße: 14px;}
.Fenster {
Rand: 6px #ccc Anfang;
Breite: 680px;
Höhe: 442px;
Hintergrundfarbe: #000;
Position: absolut;
oben: 40px;
links: 68px;
Überlauf: versteckt}
.Titel {
Hintergrundfarbe: #08246B;
Polsterung: 2px;}
#text {
Hintergrundfarbe: #000;
Rahmen oben: #ccc Anfang 2px;
Höhe: 420px;
Überlauf-y:scrollen;}
ul {
Rand: 0px;
Polsterung: 0px;
Listenstil: keine;}
Eingabe {
Hintergrundfarbe: #000;
Rand: 0;
Farbe: #fff;
Umriss: keiner;
/*Schriftgröße:12px;*/
Breite: 100 %}

Effektbild:

<<:  Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

>>:  MySQL-Serie 9 MySQL-Abfrage-Cache und -Index

Artikel empfehlen

Analyse des Docker-Compose-Image-Release-Prozesses des Springboot-Projekts

Einführung Das Docker-Compose-Projekt ist ein off...

Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL

Inhaltsverzeichnis 1. Index-Grundlagen 1. Arten v...

Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.

Vorwort: Ich habe Warnungen zu wahnsinnig langsam...

Ausführliche Erklärung des Sperrmechanismus in MySQL

Vorwort Um die Konsistenz und Integrität der Date...

Detaillierte Erklärung gängiger Vorlagenbefehle in docker-compose.yml-Dateien

Hinweis: Beim Schreiben der Datei docker-compose....

Detaillierte Erläuterung der Nginx-Protokollanpassung und Aktivierung des Protokollpuffers

Vorwort Wenn Sie die Quelle der Website-Besuche z...

So schreiben Sie den Nofollow-Tag und verwenden ihn

Das „nofollow“-Tag wurde vor einigen Jahren von G...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

In der Vergangenheit wurde Float häufig für das L...

So führen Sie ein Python-Skript auf Docker aus

Erstellen Sie zunächst ein spezielles Projektverz...

So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation

1. Traditionelle Binlog-Master-Slave-Replikation,...

Allgemeine Struktur-Tags in XHTML

Struktur Text, Kopf, HTML, Titel Text abbr, Akron...

Zusammenfassung der Fallstricke, die Ihnen bei der Entwicklung von WeChat-Applets möglicherweise noch nicht begegnet sind

Inhaltsverzeichnis getApp() Definieren Sie Variab...

Detailliertes Beispiel für die Verkettung mehrerer Felder in MySQL

Das Zusammenführen von Zeilen- und Feldergebnisse...

Zusammenfassung der Methoden zum Löschen des Cache im Linux-System

1) Einführung in den Cache-Mechanismus Um die Lei...

Detaillierte Erläuterung der SRIOV-Passthrough-Konfiguration und Leistungstests basierend auf KVM

SRIOV-Einführung, VF-Passthrough-Konfiguration un...