HTML仿命令行界面具体实现方法-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

HTML仿命令行界面具体实现方法

Mar 09, 2017 pm 04:06 PM

html

本文为大家介绍下HTML仿命令行界面的具体实现，感兴趣的朋友不要错过 HTML部分

代码如下:

&lt;!DOCTYPE html&gt; 
&lt;head&gt; 
&lt;meta charset=&quot;utf-8&quot; /&gt; 
&lt;title&gt;WeChat Manager&lt;/title&gt; 
&lt;link href=&quot;css/index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; 
&lt;script src=&quot;http://code.jquery.com/jquery-1.10.2.min.js&quot;&gt; 
&lt;/script&gt; 
&lt;script&gt; 
$(document).ready(function(){ 
$(document).keyup(function(event){ 
if(event.keyCode ==13){ 
$.ajax({ 
type: &quot;POST&quot;, 
url: &quot;ok.php&quot;, 
data: &quot;code=&quot;+$(&quot;#in&quot;).val(), 
success: function(msg){ 
$(&quot;ul&quot;).append(&quot;&lt;li&gt;&quot;+$(&quot;#in&quot;).val()+&quot;&lt;/li&gt;&quot;); //将输入的输出到界面 
$(&quot;ul&quot;).append(&quot;&lt;li&gt;&quot;+msg+&quot;&lt;/li&gt;&quot;); //获取返回值并输出 
$(&quot;#in&quot;).val(&quot;&quot;); //清空输入框 
$(&quot;#text&quot;).scrollTop($(&quot;#text&quot;).scrollTop()+32);//滚动条拉到最下面，显示出输入框 
} 
}); 
} 
}); 
$(&quot;#in&quot;)[0].focus(); 
}); 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p class=&quot;window&quot;&gt; 
&lt;p class=&quot;title&quot;&gt; 
&lt;img src=&quot;css/1.jpg&quot;&gt; 
&lt;span&gt;Wechat Dos&lt;/span&gt; 
&lt;/p&gt; 
&lt;p id=&quot;text&quot;&gt; 
&lt;ul&gt; 
&lt;li&gt;Welcome...&lt;/li&gt; 
&lt;li&gt;login:&lt;/li&gt; 
&lt;/ul&gt; 
&lt;input type=&quot;text&quot; name=&quot;&quot; id=&#39;in&#39;&gt; 
&lt;/p&gt; 
&lt;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Salin selepas log masuk

CSS部分

代码如下:

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

Salin selepas log masuk

效果图：
HTML仿命令行界面具体实现方法

Atas ialah kandungan terperinci HTML仿命令行界面具体实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn