Méthode d'implémentation spécifique de l'interface de ligne de commande d'imitation HTML-tutoriel HTML-php.cn

Méthode d'implémentation spécifique de l'interface de ligne de commande d'imitation HTML

高洛峰

Libérer： 2017-03-09 16:06:01

original

2650 Les gens l'ont consulté

Cet article présente l'implémentation spécifique de l'interface de ligne de commande d'imitation HTML. Les amis intéressés ne devraient pas le manquer. Le code de la partie HTML

est le suivant :

<!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> 
<p class="window"> 
<p class="title"> 
<img  src="css/1.jpg" alt="Méthode d'implémentation spécifique de l'interface de ligne de commande d'imitation HTML" > 
<span>Wechat Dos</span> 
</p> 
<p id="text"> 
<ul> 
<li>Welcome...</li> 
<li>login:</li> 
</ul> 
<input type="text" name="" id=&#39;in&#39;> 
</p> 
</p> 
</body> 
</html>

Copier après la connexion

Le code de la partie CSS

est le suivant :

@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%}

Copier après la connexion

Rendu :
Méthode dimplémentation spécifique de linterface de ligne de commande dimitation HTML