本文为大家介绍下HTML仿命令行界面的具体实现,感兴趣的朋友不要错过
HTML部分
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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" >
<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>
|
Salin selepas log masuk
CSS部分
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | @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;
width:100%}
|
Salin selepas log masuk
效果图:

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