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


Posted in Javascript onFebruary 10, 2017

花了俩小时折腾出来的,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。

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

Javascript 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
js 获取json数组里面数组的长度实例
Oct 31 Javascript
vuex与组件联合使用的方法
May 10 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
深入了解JavaScript 私有化
May 30 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
You might like
DISCUZ 分页代码
2007/01/02 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
Java中final关键字详解
2015/08/10 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python实现购物车程序
2018/04/16 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
通过实例解析Python调用json模块
2019/12/11 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
会计实训总结范文
2015/08/03 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python实现照片卡通化
2021/12/06 Python
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB