基于jQuery实现简单人工智能聊天室

花了俩小时折腾出来的,jQuery人工智能聊天室长这样:

主要功能:

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" rel="external nofollow" 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 box
function 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 dialog
function 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 <10
function plusZero(x){
 if(x < 10){
  x = "0" + x;
 }
 else {
  x = x;
 }
 return x;
} 

//greeting by hour
function 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 box
function clearChatBox() {
 $(".chat-box").html("");
} 

DEMO在这儿,欢迎FORK:AI Chat Box

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 玩转NODE.JS(四)-搭建简单的聊天室的代码

    Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一些个教程使用它来搭建一个超级简单的聊天室. 初始化项目 在电脑里新建一个文件夹,叫做"chatroom",然后使用npm进行初始化: $ npm init 然后根据提示以及相关信息一步一步输入,当然也可以一路回车下去,之后会在项目里生成一个package.json文件,里面的信息如下: $ cat package.json { &q

  • Node.js利用Net模块实现多人命令行聊天室的方法

    这篇文章介绍的是Node.js利用Net模块实现命令行式的多人聊天室,下面话不多说,来看看详细的介绍吧. 1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类: Server和Socket类.工厂方法. Server类如下图所示: net.Server类可以用来创建一个TCP或本地服务器,继承了EventEmitter. Socket类如下: net.Socket类一般用创建一个socket客户端或者是ne

  • nodejs实现的一个简单聊天室功能分享

    今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码 首先我们通过express来托管网站,并附加到socke

  • Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室

    为更好的运用这两天学到的Ajax的相关的知识,就做了个简单的在线网络聊天室. 思路 实现聊天室,基本上就是通过Ajax来传递数据,让PHP来实现对数据的差入和查找,再交给前端JavaScript实现页面的更新,达到即时聊天的功能. 消息显示区 消息显示区就是一个DIV块,我们会借助Ajax获取到服务器端信息之后,使用JavaScript来更新页面. <h3>消息显示区</h3> <div id="up"> </div> <hr /&

  • JavaScript仿聊天室聊天记录

    本文实例为大家分享了js仿聊天室聊天记录的具体代码,供大家参考,具体内容如下 参考样式(css自定义聊天窗口样式):http://xiazai.jb51.net/201612/yuanma/css3chatstyle(jb51.net).rar 功能描述: 1. 用户在微信公众号里发送内容,参与活动 2. 后台提供类似聊天室的窗口显示用户实时发布的内容 界面截图: 代码: body { padding: 0; margin: 0; background: -moz-linear-gradient

  • Node.js制作简单聊天室

    看了TCP的有关知识,写了个基于NET的聊天室. var net = require('net'); var count = 0, users = {}; var server = net.createServer(function (conn) { console.log('连接到'); conn.write( "\r\n > welcome to node-chat!" + "\r\n > " + count + " other peopl

  • AngularJS+Node.js实现在线聊天室

    不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://files.jb51.net/file_images/article/201508/201508281040051.gif 功能 着手开发之前,首先明确一

  • 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

  • Node.js中使用socket创建私聊和公聊聊天室

    先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git

  • 基于javascript、ajax、memcache和PHP实现的简易在线聊天室

    在线聊天室(online chatrooms)是一个共多人进行沟通交流的网络平台,随着越来越多的新技术的发明和成熟运用,在线聊天室也出现使用各种不同技术的, 这篇文章我想简单总结一下. 首先说一下前台技术,最新的当然是基于HTML5的websocket,它实现了浏览器与服务器全双工通信(full-duplex).WebSocket通信协议于2011年被IETF定为标准 RFC 6455,WebSocketAPI被W3C定为标准.在WebSocket API中,浏览器和服务器只需要做一个握手的动作

随机推荐