jq,ajax实现web版聊天机器人

点击查看运行

html部分

         <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>小琴robot</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<div class="wrapper">
		 
		<p class="name">小琴robot</p>
		<div class="content-box">
			  <div class="robot">
                <div class="avitor"></div>
                <div class="text">想我了吗('◡')</div>
            </div>
		</div>
		<div class="input-box">
			<input type="text" name="" id="inp" placeholder="你想说点啥~">
			<button type="" id="submit">发送</button>
		</div>
	</div>
	<script src="./ajax.js"></script>
    <script src="./index.js"></script>
</body>
</html>

css部分

 *{
	padding:0;
	margin:0;
}

::-webkit-scrollbar{
	display: none;
}
html,body{
	height:100%;
}
.wrapper{
	width:600px;
	height:100%;
	margin:0 auto;
	background-color:rgba(100,112,154,0.2);
	border-radius: 10px;
}
p{
	text-align: center;
	background-color:rgba(226,190,170,0.8);
	height:40px;
	line-height: 40px;
	font-size: 20px;
	color:#fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;



}

.content-box{
	overflow-y:auto;
	width:100%;
	height: calc(100% - 90px)
}

.avitor{
	 /*float:left;*/

	width:30px;
	height:30px;
	border-radius: 50%;
	/*border: 1px solid black;*/
	display: inline-block;
	

}
.mine{
	float:right;
	margin:10px;
	width: calc(100% - 10px);
	 
}
.robot{
	float:left;
	margin:10px;
	width: calc(100% - 10px);
	 

	 

}

.mine .avitor{
	float:right;

	background-image: url("./4.png");
}
.mine .text{
	 float:right;
	background-color: rgba(112,182,163,0.5);
	margin-right: 15px;
	position: relative;

}
.mine .text::after{
	content:"";
	width:0px;
	height:0px;
	display: inline-block;
	position: absolute;
	right:-20px;
	top:9px;
	border-width:20px;
	border:10px solid transparent;
	border-left-color: rgba(112,182,163,0.5);
	 
}
.robot .text{
	background-color: rgba(81,173,93,0.5);
	margin-left: 15px;
	position: relative;

	
}
.robot .text::after{
	content:"";
	width:0px;
	height:0px;
	display: inline-block;
	border:10px solid transparent;
	border-right-color:rgba(81,173,93,0.5);
	position: absolute;
	left:-20px;
	top:9px; 
}

.robot .avitor{
	background-image: url("./2.png");
}
.mine .avitor,
.robot .avitor{
	background-size: 100% 100%;
	vertical-align:top;
}


.text{
	max-width:250px;
	border:1px solid #ddd;
	display: inline-block;
	padding:10px;
	border-radius: 10px;
	 

}
.input-box{
	height:50px;
	width:100%;
	background-color:rgba(191,155,255,0.5);
	line-height: 50px;
	text-align: center;

}
#inp{
	padding-left: 4px;
	font-size: 16px;
	width:60%;
	height:60%;
	border: 1px solid #ccc;
	border-radius: 6px;
	/*margin:10px auto;*/

}

#submit{
	border-radius: 5px;
	font-size: 16px;
	padding:3px 12px;
	margin:0 5px;
	background-color:#FFFFFFFF;
	outline: none;
	border:none;
	font-weight:bolder;
	color:##404040FF;
	box-shadow: 0px 1px 3px 1px #404040FF;
	transition: all 0.5 linear;
}

input::placeholder{
	color:#A0A0A0FF;
	font-size: 13px;

}
#submit:hover{
	transform:scale(1.1);
	box-shadow: 0px 3px 5px 1px #404040FF;


}


ajax.js

 function ajax(method, url, callback, data, flag) {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr =  new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHttp')
    }
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                callback(xhr.responseText);
            }else {
                console.log('error');
            }
        }
    }
    method = method.toUpperCase();
    if(method == 'GET') {
        var date = new Date(),
            timer = date.getTime();
        xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
        xhr.send();
    }else if(method == 'POST') {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(data);
    }
}

js部分

  
  
function init () {
    bindEvent();
}
function bindEvent() {
    $('#inp').keyup(function (e) {
        if (e.keyCode == 13) {
            $('#submit').trigger('click');
        }
    });
    $('#submit').click(function (e) {
        var val = $('#inp').val();
        if (val) {
            addDom('mine', val);
            getData(val);
            $('#inp').val('');
        }
    })
}

// 文字添加到页面中去
function addDom(who, val) {
    $(' <div class="' + who + '">\
    <div class="avitor"></div>\
    <div class="text">' + val + '</div>\
</div>').appendTo($('.content-box'));
    var scrollHeight = $('.content-box')[0].scrollHeight ;
    var innerHeight = $('.content-box').innerHeight();
    $('.content-box').scrollTop(scrollHeight - innerHeight);
}

 // var paras = "key= 72a5507158ff4ca5aa05043d4c24ce55&info="+sayContent;

function getData(val) {
        var paras = "key=你的key&info="+val;
         ajax('POST',"http://www.tuling123.com/openapi/api",success, paras, true)
          function success(data){
            // console.log(data)
          da=eval("("+data+")")
          addDom('robot', da.text);
          }
    
}
init()

在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页