溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何實現HTML仿命令行界面”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何實現HTML仿命令行界面”吧!
HTML部分
<!DOCTYPEhtml>
<head>
<metacharset="utf-8"/>
<title>WeChatManager</title>
<linkhref="css/index.css"rel="stylesheet"type="text/css">
<scriptsrc="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>
<divclass="window">
<divclass="title">
<imgsrc="css/1.jpg">
<span>WechatDos</span>
</div>
<divid="text">
<ul>
<li>Welcome...</li>
<li>login:</li>
</ul>
<inputtype="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#cccoutset;
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:#cccoutset2px;
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仿命令行界面”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
