使用JavaScript构建图灵机器人项目

说实话，学过安卓的基本上都对图灵机器人很熟悉，基本上是入门必学。刚好这几天有时间，就把之前做的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;}