使用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;
}

觉得可以的话，就给个赞赏吧!