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

Docker-Bereitstellung – Analyse des Implementierungsprozesses für RabbitMQ-Container

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

Es gibt viele Versionen der Java-Sprache. Zusätzl...

Implementierung der HTML-Befehlszeilenschnittstelle

Docker-Bereitstellung – Analyse des Implementierungsprozesses für RabbitMQ-Container

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Detaillierte Erklärung zum manuellen Hochladen von Excel-Dateien auf den Server mit Vue ElementUI

Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Wie überwacht und erhält Zabbix Netzwerkgerätedaten über SSH?

So verwenden Sie den SS-Befehl anstelle von Netstat im Linux-Betrieb und bei der Wartung

Eine detaillierte Einführung in die Linux-Verzeichnisstruktur

Allgemeine Vorgänge des Web-Frontends (einschließlich JS/HTML/CSS und anderer Wissensaspekte)

Erstellen Sie mit Flutter eine verschiebbare Stapel-Widget-Funktion

Artikel empfehlen

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

Detailliertes Tutorial zur Konfigurationsmethode der kostenlosen Installationsversion von Mysql 5.7.19 (64-Bit)

Gruselige Halloween-Linux-Befehle

Dieser Artikel hilft Ihnen, JavaScript-Variablen und -Datentypen zu verstehen

Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien

Detaillierte Erläuterung der Datentypprobleme bei der JS-Array-Indexerkennung

Aktivierungscode und KMS-Installationsschlüssel für Windows Server 2019 (Volume License Edition, GVLK)

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?

Bringen Sie Ihnen Schritt für Schritt das Tutorial zur MySQL-Abfrageoptimierungsanalyse bei

Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL

Sehr praktisches Tutorial zur umfassenden Zusammenfassung der MySQL-Funktionen und detaillierten Beispielanalysen

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

So lösen Sie das Problem des Randkollapses in CSS

15 wichtige Variablen, die Sie zur MySQL-Leistungsoptimierung kennen müssen (Zusammenfassung)

So implementieren Sie eine Paging-Abfrage in MySQL