如何实现HTML仿命令行界面

本篇内容主要讲解“如何实现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>

$(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>

</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仿命令行界面

到此，相信大家对“如何实现HTML仿命令行界面”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

网页题目：如何实现HTML仿命令行界面
文章位置：https://www.cdcxhl.com/article18/gshcdp.html

成都网站建设公司_创新互联，为您提供用户体验、关键词优化、动态网站、外贸网站建设、做网站、网站内链

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容