怎样实现HTML的仿命令行界面

程序员文章站 2022-04-26 09:00:56

...

这次给大家带来怎样实现HTML的仿命令行界面，实现HTML的仿命令行界面的注意事项有哪些，下面就是实战案例，一起来看一下。

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='in'> 
</div> 
</div> 
</body> 
</html>

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

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！

怎样实现HTML的仿命令行界面

html5仿支付宝密码框的实现代码

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

仿网易云播放界面圆盘动画的实现

html+css3实现的登录界面

使用css样式设计一个简单的html登陆界面的实现

利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

仿腾讯盖楼爬墙新闻评论的CSS实现_html/css_WEB-ITnose

请问大神怎样让垂直的文字实现这样的居中_html/css_WEB-ITnose

html5、jquery怎样实现在回到历史页面时完全保留之前离开这个页面时的状态？

js怎样修改html元素的内容？HTML DOM实现修改内容