说实话,学过安卓的基本上都对图灵机器人很熟悉,基本上是入门必学。刚好这几天有时间,就把之前做的js版图灵机器人分享一下。
嗯,先上简单的一张效果图吧。
这里添加了提示文本,然后输入框添加了占位符。
先填上html代码吧。详细的说明会在注释里。
HTMl代码
<div id="parent" id="parent1">
<div id="root">
<p class="p_class">图灵机器人</p>
</div>
<div id="chat">
<div id="root2">
<table id="table1"></table>
<div id="div_end"></div>
</div>
<hr id="hr1">
<div id="div1">
<textarea id="text1" onclick="setNull()" onmouseout="setHint()"></textarea>
<br>
<button id="btn1" onclick="sendData()">告诉它</button>
</div>
</div>
</div>
布局的话没啥解释的,header、center、booter。基本都是这个思路。然后气泡聊天布局是使用table实现的,通过控制文本方向。
接下来看一下JavaScript代码:
//这里url是自己请求图灵的api。我的先隐藏一下
var url = '';
var div_send_root, table_root;
var etText; //获得输入框
var info1="有什么想说的,告诉它吧!"; //输入框提示信息
var text_info; //获得输入框文本
//给服务器发送数据
function sendData() {
/*获取输入框数据,并拼接成url*/
var getText = $("#text1").val();
if (getText != null && getText != ""&&getText!=info1) {
var info = url + "&info=" + getText;
console.log(info);
/*保存发送的历史记录,并清空输入框*/
addHs(getText, true);
$("#text1").val("");
/*请求Ajax获取返回的数据*/
var send1 = new XMLHttpRequest();
send1.open("GET", info, true);
send1.send();
send1.onreadystatechange = function () {
if (send1.readyState == 4 && send1.status == 200) {
var data = send1.responseText;
setResult(data);
}
};
}
}
/*添加历史记录*/
function addHs(info, isMe) {
var p1 = document.createElement("p");
var tr1 = document.createElement("tr");
var div1=document.createElement("div");
var td_left = document.createElement("td");
var td_right = document.createElement("td");
var img=document.createElement("img");
div1.className="td_div";
img.className="td_img";
td_left.className = "td_left";
td_right.className = "td_right";
//判断是自己发送的数据还是接收到的数据
if (isMe) {
//tr2.innerHTML=new Date().toLocaleTimeString();
img.src="one.jpg";
p1.innerHTML = info ;
p1.className = "h_p1";
td_right.appendChild(p1);
td_right.appendChild(img);
tr1.appendChild(td_right);
} else {
img.src="two.jpg";
p1.innerHTML =info;
p1.className = "h_p2";
div1.appendChild(img);
div1.appendChild(p1);
td_left.appendChild(div1);
tr1.appendChild(td_left);
}
table_root.appendChild(tr1);
setEnd();
}
//获取服务器返回的数据并显示
function setResult(data) {
console.log(data);
var json = JSON.parse(data);
addHs(json.text, false);
}
/*添加页面第一条信息*/
function addOne(){
table_root = document.getElementById("table1");
div_send_root = document.getElementById("root2");
addHs("你想和我说点什么呢?",false);
/*给text绑定回车事件*/
$('#text1').bind('keyup', function(event) {
if (event.keyCode == "13") {
sendData();
}
});
}
/*让div滚动条始终在底部*/
function setEnd(){
var root2=document.getElementById("div_end");
root2.scrollIntoView();
}
/*给输入框设置提示信息*/
function setHint(){
etText=document.getElementById("#text1");
text_info=$("#text1").val();
if(text_info==null||text_info==""){
$("#text1").text(info1);
}
}
/*输入框点击事件*/
function setNull(){
text_info=$("#text1").val();
if(text_info==info1){
$("#text1").text("");
}
}
大致看了一下,发现之前做的时候没有对表格显示进行一下优化。复用了一部分代码。有需求可以改一下。
接下来就是css代码,比较简单,可能看起来没什么营养。就没有用less写。控制一下页面显示,因为我主要是想在手机上使用,所以,适配方面主要针对的是手机。有需要的话也可以写两个布局,通过监听页面变化,显示不同的页面,这里就不做解释了。
#text1 {
width: 98%;
height: auto;
margin-left: 1%;
padding: 10px;
}
#parent1 {
width: 100%;
height: auto;
margin: 0px auto;
}
#btn1 {
margin: 1%;
}
#root {
width: 100%;
margin: 0 auto;
background-color: #66ccff;
}
#root2 {
width: 100%;
height: 400px;
overflow: auto;
}
#hr1 {
color: #66ccff;
}
#div1 {
width: 100%;
}
.p_class {
width: 100px;
height: auto;
margin: 0 auto;
padding: 5px;
font-size: 17px;
color: white;
}
#chat {
width: 92%;
height: auto;
margin: 4%;
border-style: solid;
border-color: #66ccff;
border-width: 1px;
}
/*左右聊天气泡*/
.h_p1 {
margin-right: 5px;
font-size: 15px;
color: white;
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
background-color: skyblue;
float: left;
}
.h_p2 {
margin-left: 5px;
font-size: 15px;
color: white;
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
background-color: #cbc8cc;
float: left;
}
/*table*/
#table1 {
width: 100%;
}
.td_left {
margin: 5px;
text-align: left;
padding-left: 10px;
float: left;
}
.td_right {
margin: 5px;
text-align: right;
padding-right: 10px;
float: right;
}
.td_img {
width: 40px;
height: 40px;
border-radius: 50%;
float: left;
}
.td_div {
width: 100%;
}
.div_end {
height: 0;
}
觉得可以的话,就给个赞赏吧!