Home >Web Front-end >HTML Tutorial >How to implement HTML-like command line interface

How to implement HTML-like command line interface

php中世界最好的语言
php中世界最好的语言Original
2018-02-09 10:02:023714browse

This time I will show you how to implement an HTML-like command line interface. What are the precautions for implementing an HTML-like command line interface? The following is a practical case, let's take a look.

HTML part

<!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>"); //将输入的输出到界面 
$("ul").append("<li>"+msg+"</li>"); //获取返回值并输出 
$("#in").val(""); //清空输入框 
$("#text").scrollTop($("#text").scrollTop()+32);//滚动条拉到最下面,显示出输入框 
} 
}); 
} 
}); 
$("#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=&#39;in&#39;> 
</div> 
</div> 
</body> 
</html>

CSS part

@charset "utf-8"; 
body { 
background-color:#396DA5; 
margin:0px; 
padding:0px; 
color:#fff; 
font:"微软雅黑"; 
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%}

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to other php Chinese websites related articles!

Related reading:

How to make the textarea text area width and height width and height automatically adapt

html hyperlink a After the click event, jump to the address pointed to by href

The above is the detailed content of How to implement HTML-like command line interface. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn