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

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)

1 Get the installation resource package mysql-8.0...

Summary of common docker commands

Docker installation 1. Requirements: Linux kernel...

Native JS to achieve blinds special effects

This article shares a blinds special effect imple...

Use tomcat to deploy SpringBoot war package in centos environment

Prepare war package 1. Prepare the existing Sprin...

Docker builds the code detection platform SonarQube and detects the process of Maven projects

1 Introduction Good coding habits are qualities t...

How to load the camera in HTML

Effect diagram: Overall effect: Video loading: Ph...

Summary of discussion on nginx cookie validity period

Every visit will generate Cookie in the browser, ...

innerHTML Application

Blank's blog: http://www.planabc.net/ The use...

Example of how to configure cross-domain failure repair in nginx

Nginx cross-domain configuration does not take ef...

Why is the MySQL auto-increment primary key not continuous?

Table of contents 1. Introduction 2. Self-increme...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

How to install rabbitmq-server using yum on centos

Socat needs to be installed before installing rab...

Cross-origin image resource permissions (CORS enabled image)

The HTML specification document introduces the cr...

Analysis and description of network configuration files under Ubuntu system

I encountered a strange network problem today. I ...

MySQL 8.0.14 installation and configuration method graphic tutorial

This article records the installation and configu...