基于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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
javascript实现留言板功能
Feb 08 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
php截取中文字符串函数实例
2015/02/23 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
JavaScript面向对象精要(下部)
2017/09/12 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python Queue模块详解
2014/11/30 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
详谈python read readline readlines的区别
2017/09/22 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
造价工程师个人求职信
2013/09/21 职场文书
初中校园广播稿
2014/02/02 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python