花了了倆小時(shí)搗鼓出來(lái)的玩意兒~

長(zhǎng)這樣：

主要功能：

1.當(dāng)然是聊天啦~點(diǎn)擊飛機(jī)按鈕或者回車可以發(fā)送消息到面板。

2.輸入特定的內(nèi)容，系統(tǒng)會(huì)給你相應(yīng)的回復(fù)（這里我只設(shè)置了Hello，How are you和詢問(wèn)時(shí)間的自動(dòng)回復(fù)）。

3.點(diǎn)擊叉叉可以清除面板上的所有聊天記錄。

4.問(wèn)時(shí)間的時(shí)候，根據(jù)現(xiàn)在的時(shí)間，會(huì)給你相應(yīng)的不同的回復(fù)，比如現(xiàn)在是22-23點(diǎn)，系統(tǒng)會(huì)回復(fù)你“good night”。

5.隨著聊天的進(jìn)行，聊天面板右側(cè)的滾動(dòng)條會(huì)一直維持在最底部。

HTML：

<div class="chat-box"></div><form class="form-inline chat-form">  <input type="text" class="form-control chat-message" placeholder="Say Something">  <button type="button" class="btn btn-PRimary chat-send" title="Send Message">    <i class="fa fa-paper-plane" aria-hidden="true">    </i>  </button>  <button type="reset" class="btn btn-success chat-reset" title="Reset Message">    <i class="fa fa-refresh" aria-hidden="true">    </i>  </button>  <button type="button" class="btn btn-danger chat-clear" title="Clear the Chat Box">    <i class="fa fa-times" aria-hidden="true">    </i>  </button></form><hr><footer>  Designed By  <a href="http://blog.csdn.net/alenhhy" target="_blank">    Alen Hu  </a></footer>
*使用了Bootstrap3框架。
JQuery:
$(document).ready(function() {    //send the message by click    $(".chat-send").click(sendMsg);    //press enter to send    $("form").keypress(function(event) {        if (event.keyCode === 13) {            event.preventDefault();            sendMsg();        }    });    //clear the chat box    $(".chat-clear").click(clearChatBox);});//send message to chat boxfunction sendMsg() {    var msg = $(".chat-message");    var msgVal = msg.val();    var chatBox = $(".chat-box");    if (msgVal) {        var msgAppend = "<p><span id='you'>You: </span>" + msgVal + "</p><hr class='you-hr'>";        chatBox.append(msgAppend);    } else {}    //dialog reply    dialog(msgVal);    //empty input    msg.val("");    //keep the scroll in bottom    chatBox.scrollTop(chatBox[0].scrollHeight);}//set up the AI dialogfunction dialog(msg){    var replyArr = ["Hi, how's it going :)","I'm good, thx, U? :)"];    msg = msg.toLowerCase();    var time = new Date();    var hour = time.getHours();    var minute = time.getMinutes();    var currentTime = plusZero(hour) + ":" + plusZero(minute);    var chatBox = $(".chat-box");    if(msg.indexOf("hello") != -1){        chatBox.append("<p><span id='ai'>AI: </span>" + replyArr[0] + "</p><hr class='ai-hr'>");    }    else if(msg.indexOf("how are you") != -1 || msg.indexOf("how are u") != -1){        chatBox.append("<p><span id='ai'>AI: </span>" + replyArr[1] + "</p><hr class='ai-hr'>");    }    else if(msg.indexOf("time") != -1){        chatBox.append("<p><span id='ai'>AI: </span>Current Time: " + currentTime + ". " + timeGreeting(hour) + "~ :)</p><hr class='ai-hr'>");    }    else {}}//add 0 if time number is <10function plusZero(x){    if(x < 10){        x = "0" + x;    }    else {        x = x;    }    return x;}//greeting by hourfunction timeGreeting(h){    var greeting = ["U need to sleep","Good morning","Lunch time now","Feel asleep? Have some coffee","Free time~Yeah","Good night"];    if(h>=0&&h<=6){        return greeting[0];    }    else if(h>=7&&h<=10){        return greeting[1];    }    else if(h>=11&&h<=13){        return greeting[2];    }    else if(h>=14&&h<=18){        return greeting[3];    }    else if(h>=19&&h<=21){        return greeting[4];    }    else if(h>=22&&h<=23){        return greeting[5];    }    else {        return "";    }}//clear the chat boxfunction clearChatBox() {    $(".chat-box").html("");}DEMO在這兒，歡迎FORK：AI Chat Box。