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

6 Lösungen für Netzwerkfehler im Docker-Container

Implementierung der HTML-Befehlszeilenschnittstelle

6 Lösungen für Netzwerkfehler im Docker-Container

So finden Sie identische Dateien in Linux

Verwenden Sie Vue3, um eine Komponente zu implementieren, die mit js aufgerufen werden kann

So fahren Sie eine MySQL-Instanz sicher herunter

So generieren Sie eine eindeutige Server-ID in MySQL

Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13

Wettersymbol-Animationseffekt implementiert durch CSS3

Nginx-Reverseproxy und Lastausgleichspraxis

Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren

Tutorial zur Installation und Konfiguration der Remote-Anmeldung bei MySQL unter Ubuntu

Artikel empfehlen

Schritte zum Erstellen eines CentOS-Containers über Docker

So verweisen Sie direkt auf Vue und Element-UI in HTML

So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung

Detaillierte Erläuterung der Verwendung des Linux-Befehls seq

Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen

Analyse des Projektverlaufs bei der Ideenverpackung und beim Hochladen in den Cloud-Dienst

So ändern Sie die SSH-Portnummer in der Centos8-Umgebung

Mehrere Möglichkeiten zum Zentrieren einer Box in der Webentwicklung

Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.

Detaillierte Erklärung, wie MySQL (InnoDB) mit Deadlocks umgeht

Einfaches Webdesign-Konzept – Farbabstimmung

Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

MySQL startet langsames SQL und analysiert die Ursachen