ホームページ > 記事 > ウェブフロントエンド > HTML模倣コマンドラインインターフェースの具体的な実装方法
HTML模倣コマンドラインインターフェースの具体的な実装方法
- 高洛峰オリジナル
- 2017-03-09 16:06:012647ブラウズ
この記事では、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>
<p class="window">
<p class="title">
<img src="css/1.jpg" alt="HTML模倣コマンドラインインターフェースの具体的な実装方法" >
<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 部分
コードは次のとおりです:
@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模倣コマンドラインインターフェースの具体的な実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLのdivとspanの違いを解説次の記事：HTMLのdivとspanの違いを解説