Implementation of HTML command line interface

Implementation of HTML command line interface
HTML Part

Copy code
The code is as follows:

<!DOCTYPE html>
<head>
<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">
</script>
<script>
$(document).ready(function(){
$(document).keyup(function(event){
if(event.keyCode == 13){
$.ajax({
type: "POST",
url: "ok.php",
data: "code="+$("#in").val(),
success: function(msg){
$("ul").append("<li>"+$("#in").val()+"</li>"); // Output the input to the interface
$("ul").append("<li>"+msg+"</li>"); //Get the return value and output
$("#in").val(""); //Clear input box
$("#text").scrollTop($("#text").scrollTop()+32); //Scroll the bar to the bottom to display the input box
}
});
}
});
$("#in")[0].focus();
});
</script>
</head>
<body>
<div class="window">
<div class="title">
<img src="css/1.jpg">
<span>Wechat Dos</span>
</div>
<div id="text">
<ul>
<li>Welcome...</li>
<li>login:</li>
</ul>
<input type="text" name="" id='in'>
</div>
</div>
</body>
</html>

CSS Part

Copy code
The code is as follows:

@charset "utf-8";
body {
background-color:#396DA5;
margin:0px;
padding:0px;
color:#fff;
font:"Microsoft YaHei";
font-size:14px;}
.window {
border:6px #ccc outset;
width:680px;
height:442px;
background-color:#000;
position:absolute;
top:40px;
left:68px;
overflow:hidden}
.title {
background-color:#08246B;
padding:2px;}
#text {
background-color:#000;
border-top:#ccc outset 2px;
height:420px;
overflow-y:scroll;}
ul {
margin:0px;
padding:0px;
list-style:none;}
input {
background-color:#000;
border:0;
color:#fff;
outline:none;
/*font-size:12px;*/
width:100%}

Effect picture:

<<:  Use vue to realize the registration page effect vue to realize SMS verification code login

>>:  A brief summary of my experience in writing HTML pages

Recommend

Solution to the blank line in front of the utf8 encoded web page when it contains files

<br />The page uses UTF8 encoding, and the h...

Use pictures to realize personalized underline of hyperlinks

Don't be surprised if you see some kind of und...

How to package the docker image, push it to the remote server and deploy it to k8s

Table of contents 1. Dockerfile 2. pom configurat...

MySQL solution for creating horizontal histogram

Preface Histogram is a basic statistical informat...

js memory leak scenarios, how to monitor and analyze them in detail

Table of contents Preface What situations can cau...

Getting Started Tutorial for Beginners: Domain Name Resolution and Binding

So after registering a domain name and purchasing...

Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data

1. To optimize the query, try to avoid full table...

Docker removes abnormal container operations

This rookie encountered such a problem when he ju...

Docker container regularly backs up the database and sends it to the specified mailbox (design idea)

Table of contents 1. Background: 2. Design ideas:...

Problems with configuring https server and reverse proxy with Nginx under Windows

Request logic Front-end --> Request nginx via ...

CSS syntax for table borders

<br /> CSS syntax for table borders The spec...

Record a pitfall of MySQL update statement update

background Recently, I executed a DML statement d...

Detailed explanation of how to gracefully delete a large table in MySQL

Preface To delete a table, the command that comes...

Let's take a look at some powerful operators in JavaScript

Table of contents Preface 1. Null coalescing oper...

Docker Machine in-depth explanation

Differences between Docker and Docker Machine Doc...