Home >Web Front-end >HTML Tutorial >Specific implementation method of HTML imitation command line interface
Specific implementation method of HTML imitation command line interface
- 高洛峰Original
- 2017-03-09 16:06:012674browse
This article introduces the specific implementation of HTML imitation command line interface. Friends who are interested should not miss it.
HTML part
The code is as follows:
<!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="Specific implementation method of HTML imitation command line interface" >
<span>Wechat Dos</span>
</p>
<p id="text">
<ul>
<li>Welcome...</li>
<li>login:</li>
</ul>
<input type="text" name="" id='in'>
</p>
</p>
</body>
</html>
CSS part
The code is as follows:
@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%}
Rendering : 
The above is the detailed content of Specific implementation method of HTML imitation command line interface. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Explanation of the difference between div and span in HTMLNext article：Explanation of the difference between div and span in HTML