<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图灵</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
width: 500px;
margin: 100px auto 0;
}
#wrap input {
width: 486px;
height: 40px;
padding-left: 10px;
}
#list {
margin-top: 10px;
}
#list li {
width: 460px;
/*height: 40px;*/
line-height: 40px;
padding: 0 20px;
}
#list li.left {
text-align: left;
background: #ccc;
}
#list li.right {
text-align: right;
background: #777;
}
</style>
</head>
<body>
<div id="wrap">
<input id="ipt" type="text" placeholder="请输入你想说的话">
<ul id="list">
<!-- <li class="left">ME:hahahahaha</li>
<li class="right">你是傻逼:PC</li> -->
</ul>
</div>
<script>
var ipt = document.getElementById('ipt');
var list = document.getElementById('list');
document.onkeyup = function (e) {
var e = e || window.event;
if (e.keyCode == 13) {
if (ipt.value == '') {
alert("请输入内容");
} else {
sendMsg();
ipt.value = "";
}
}
}
function sendMsg() {
var myMsg = document.createElement('li');
myMsg.className = 'left';
myMsg.innerHTML = "ME:" + ipt.value;
list.appendChild(myMsg);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var url = 'http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info='+ipt.value+'&userid=1234567';
xhr.open('get',url,true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText).text;
var pc = document.createElement('li');
pc.className = 'right';
pc.innerHTML = data + "：PC";
list.appendChild(pc);
} else {
alert(xhr.status);
}
}
}
} </script>
</body>
</html>