基于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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
数组Array的排序sort方法
Feb 17 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
js星星评分效果
2014/07/24 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Python open读写文件实现脚本
2008/09/06 Python
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
出纳岗位职责
2013/11/09 职场文书
七年级地理教学反思
2014/01/26 职场文书
村干部承诺书
2014/03/28 职场文书
车辆转让协议书
2014/04/15 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
优秀党员先进材料
2014/12/18 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
责任书范本大全
2015/05/11 职场文书