HTML部分
复制代码代码如下:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>WeChat Manager</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/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%}
效果图:
复制代码代码如下:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>WeChat Manager</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="/UploadFiles/2021-03-30/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="/UploadFiles/2021-03-30/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,仿命令行,界面
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“HTML仿命令行界面具体实现”评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]