jquery实现聊天机器人

本文实例为大家分享了jquery实现聊天机器人的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./demo.css" rel="external nofollow" >
</head>

<body>
  <div class="wrapper">
    <h4 class="header">俊凯</h4>
    <div class="content">
      <div class="mine">
        <img src="./image/5.jpg" alt="">
        <div class="text">
          今天天气怎么样
        </div>
      </div>
      <div class="robot">
        <img src="./image/5.jpg" alt="">
        <div class="text">
          天气很好呀适合出门呢~~
        </div>
      </div>
    </div>
    <div class="inp">
      <input type="text" id="word">
      <button id="submit">发送</button>
    </div>

  </div>
  <script src="./jquery.js"></script>
  <script src="./demo.js"></script>

  <script>

  </script>

</body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0px;
}
html, body {
  height: 100%;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #eee;
  height: 100%;
  position: relative;
  background-color: #eee;
  /* overflow: hidden; */
}
.wrapper .content {
  /* overflow-x: hidden;
  overflow-y: scroll; */
  overflow: auto;
  height: calc(100% - 110px);
  line-height: 30px;
  padding: 10px;
}
.wrapper .header {
  background-color: grey;
  text-align: center;
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}

.wrapper .content .mine {
  float: right;
  width: 400px;
}
.wrapper .content .robot {
  float: left;
  width: 400px;
}
.wrapper .content img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
.content .mine img {
  float: right;
}
.content .mine .text {
  float: right;
  background-color: greenyellow;
}
.content .robot img {
  float: left;
}
.content .robot .text {
  float: left;
  background-color: #fff;
}
.text {
  max-width: 250px;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 3px;
  /* border: 1px solid #fff; */
}
.inp {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: absolute;
  bottom: 0px;
  font-size: 0;
  text-align: center;
  /* padding: 0 10px; */
  background-color: #ddd;
  /* vertical-align: middle; */
}

.inp input {
  width: calc(100% - 80px);
  height: 30px;
  line-height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}
.inp button {
  width: 60px;
  height: 30px;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: #ccc;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

js：

$('#submit').click(function(){
  var val = $('#word').val();
  if(val){
    renderDom('mine',val)
    $('#word').val('')
     $.ajax({
      type:'GET',
      url:'http://temp.duyiedu.com/api/chat',
      data:{
        text:val
      },
      dataType:'json',
      success:function(res){
        // console.log(res)
        renderDom('robot',res.text);
      }
    })
  }
})
$('#word').on('keyup',function (e){
  if(e.keyCode == 13){
    $('#submit').click()
  }
})
function renderDom(role,text){
  $(`
  <div class="${role}">
  <img src="./image/${role == 'mine' ? '5.jpg' : '7.jpg'}" alt="">
  <div class="text">
    ${text}
  </div>
</div>`).appendTo($(`.content`));
var scrollHeight = $('.content')[0].scrollHeight;
var contentHeight = $('.content')[0].offsetHeight;
$('.content').scrollTop(scrollHeight-contentHeight);

}

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

赞 (0)

相关推荐

  • nodejs通过钉钉群机器人推送消息的实现代码

    Intro 最近在用 nodejs 写爬虫,之前的 nodejs 爬虫代码用 js 写的,感觉可维护性太差,也没有智能提示,于是把js改用ts(typescript)重写一下,提升代码质量. 爬虫启动之后不定期会出现验证码反爬虫,需要输入验证码才能继续,于是想在需要输入验证码时推送一个消息给用户,让用户输入验证码以继续爬虫的整个流程.我们平时用钉钉办公,钉钉群有个机器人,很方便于是就实现了一个通过钉钉的群机器人实现消息推送. 实现 代码是 ts 实现的,用了 request 发起http请求,具

  • nodejs实现聊天机器人功能

    技术栈 服务端: koa.koa-route.koa-websocket.request. 客户端: html.css.js.websocket. 远程聊天API: http://api.qingyunke.com/api.php?key=free&appid=0&msg=msg. 客户端展示 开发步骤 1.在桌面创建bbs文件夹,然后在文件夹内打开cmd,输入: $ npm init 初始化箱项目,生成package.json包管理文件 2.cmd输入: $ npm install ko

  • jquery实现聊天机器人

    本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • jQuery实现Ajax聊天机器人完成案例

    聊天机器人可以省掉很多人工方面的问题,在很多时候都可以用到,例如客服,天气回复等问题,本文就详细的介绍一下jQuery Ajax聊天机器人,具体如下: ' 实现步骤: 1.梳理案例的代码结构 a.梳理页面的UI布局 b.将业务代码抽离到chat.js中 c.了解resetui()函数的作用:重置滚动条的位置 <link rel="stylesheet" href="css/reset.css" rel="external nofollow"

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • 使用图灵api创建微信聊天机器人

    使用图灵api创建微信聊天机器人

    需要准备的资源: 图灵机器人账号 微信公共账号 点击访问 图灵机器人官网,快快注册,拥有自己的聊天机器人,可以在这里先体验一下 今天主要简述微信公共平台聊天机器人的搭建,首先需要注册微信公共账号,之后在图灵机器人网站上登录你的图灵账号,可以看到如截图所示的界面,在"机器人设定"界面可以进行机器人昵称.年龄.性别等信息的设定,在"机器人调教"界面可以教你的机器人回答特定问题,"知识库"可以导入知识库,增加你的机器人的能力~~~ 红色圈起来的部分是需

  • 基于Python如何使用AIML搭建聊天机器人

    基于Python如何使用AIML搭建聊天机器人

    借助 Python 的 AIML 包,我们很容易实现人工智能聊天机器人.AIML,全名为Artificial Intelligence Markup Language(人工智能标记语言),是一种创建自然语言软件代理的XML语言,是由Richard Wallace和世界各地的自由软件社区在1995年至2002年发明的. AIML 是什么? AIML由Richard Wallace发明.他设计了一个名为 A.L.I.C.E. (Artificial Linguistics Internet Comp

  • 快速实现基于Python的微信聊天机器人示例代码

    快速实现基于Python的微信聊天机器人示例代码

    最近听说一个很好玩的图灵机器人api,正好可以用它做一个微信聊天机器人,下面是实现 # test.py import requests import itchat #这是一个用于微信回复的库 KEY = '8edce3ce905a4c1dbb965e6b35c3834d' #这个key可以直接拿来用 # 向api发送请求 def get_response(msg): apiUrl = 'http://www.tuling123.com/openapi/api' data = { 'key' :

  • 安卓(Android)聊天机器人实现代码分享

    安卓(Android)聊天机器人实现代码分享

    今天看到一个ios写的图灵机器人,直接去官网(http://www.tuling123.com/openapi/)看了下API接入,太简单了,就一个get请求~于是乎,写了一个Android版本的机器人,没什么技术含量,但是挺好玩的~刚好昨晚看了自己喜欢的秦时明月,嘿嘿,小貔貅,就是我的机器人宠物啦~ 这是一个安卓智能聊天机器人的源码,采用了仿微信的风格设计,调用的是图灵机器人的API,能够实现智能聊天.讲故事.讲笑话.查天气.查公交等丰富的功能. 先给大家展示效果图: 下面是代码片段,想要源码

  • PIGCMS 如何关闭聊天机器人

    无脑操作举例 1.找到 WeixinAction.class.php 文件,路径: 你的版本\PigCms\Lib\Action\Home 2.查询 function chat ,在 chat() 函数中修改 return 值 复制代码 代码如下: return 'str_replace('highsea', 'hi', $str)';//举个例子 为,如下: return '亲,请等待客服回复~'; 3.(可选)最后注释掉"小黄鸡"部分(可以不注释也可以): 复制代码 代码如下: /

  • 教你用Python创建微信聊天机器人

    教你用Python创建微信聊天机器人

    最近研究微信API,发现个非常好用的python库:wxpy.wxpy基于itchat,使用了 Web 微信的通讯协议,实现了微信登录.收发消息.搜索好友.数据统计等功能. 这里我们就来介绍一下这个库,并在最后实现一个聊天机器人. 有没有很兴奋?有没有很期待? 好了,接下来,开始我们的正题. 准备工作 安装非常简单,从官方源下载安装 pip install -U wxpy 或者从豆瓣源安装 pip install -U wxpy -i "https://pypi.doubanio.com/sim

  • java实现自动回复聊天机器人

    java实现自动回复聊天机器人

    本文实例为大家分享了java实现自动回复聊天机器人的具体代码,供大家参考,具体内容如下 聊天机器人 调用网上现有的接口,然后解析数据 以上是演示图片 源码下载地址 基本工作流程就是,调用API,解析返回的数据 HttpUtil类,调用API,获取返回的数据 package com; import com.sun.org.apache.bcel.internal.generic.INSTANCEOF; import java.io.BufferedReader; import java.io.In

随机推荐