首页 > 设计 > WEB开发 > 正文

基于JQuery的简单人工智能聊天室

2019-11-02 18:21:15
字体:
来源:转载
供稿:网友

花了了俩小时捣鼓出来的玩意儿~

长这样:

主要功能:

1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板。

2.输入特定的内容,系统会给你相应的回复(这里我只设置了Hello,How are you和询问时间的自动回复)。

3.点击叉叉可以清除面板上的所有聊天记录。

4.问时间的时候,根据现在的时间,会给你相应的不同的回复,比如现在是22-23点,系统会回复你“good night”。

5.随着聊天的进行,聊天面板右侧的滚动条会一直维持在最底部。

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。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表