HTML仿命令行界面

最新推荐文章于 2024-06-04 08:46:22 发布

FhqIigu

最新推荐文章于 2024-06-04 08:46:22 发布

阅读量5.6k

点赞数 2

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/fhqiigu/article/details/17356647

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

效果图：

FhqIigu

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML仿命令行界面

HTML部分WeChat Manager$(document).ready(function(){ $(document).keyup(function(event){ if(event.keyCode ==13){ $.ajax({ type: "POST", url: "ok.php", data: "code="+$("#in").val(),
复制链接

扫一扫