Comment implémenter une interface de ligne de commande de type HTML-tutoriel HTML-php.cn

Comment implémenter une interface de ligne de commande de type HTML

php中世界最好的语言

Libérer： 2018-02-09 10:02:02

original

3661 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter une interface de ligne de commande de type HTML. Quelles sont les précautions pour implémenter une interface de ligne de commande de type HTML. Voici des cas pratiques, jetons un coup d'oeil.

Partie HTML

<!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>

Copier après la connexion

Partie CSS

@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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Veuillez faire attention. des choses plus excitantes. Autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment faire en sorte que la largeur et la hauteur de la zone de texte de la zone de texte s'adaptent automatiquement à la largeur et à la hauteur

lien hypertexte html a Après l'événement de clic, accédez à l'adresse indiquée par href

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!