jquery实现聊天机器人


Posted in jQuery onFebruary 08, 2020

本文实例为大家分享了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);


}

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

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
You might like
实用函数8
2007/11/08 PHP
php强制下载类型的实现代码
2011/04/21 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
javascript继承之为什么要继承
2012/11/10 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
性能服装:HYLETE
2018/08/14 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
服务标语大全
2014/06/18 职场文书
应届生找工作求职信
2014/06/24 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
出国留学英文自荐信
2015/03/25 职场文书
收入证明范本
2015/06/12 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js