基于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 parseInt 函数分析(转)
Mar 21 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php下实现农历日历的代码
2007/03/07 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php eval函数用法总结
2012/10/31 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
zend framework重定向方法小结
2016/05/28 PHP
php简单中奖算法(实例)
2017/08/15 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
详解vue组件基础
2018/05/04 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python中的默认参数实例分析
2018/01/29 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
2014村务公开实施方案
2014/02/25 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
社区服务活动小结
2014/07/08 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
git stash(储藏)的用法总结
2022/06/25 Servers