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中的deferred使用方法
Mar 27 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
ORACLE十问
2015/04/20 面试题
学习全国两会精神心得体会范文
2014/03/17 职场文书
完整版商业计划书
2014/09/15 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
毕业生评语大全
2015/01/04 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Django如何创作一个简单的最小程序
2021/05/12 Python
教你怎么用python selenium实现自动化测试
2021/05/27 Python
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
基于Python实现股票收益率分析
2022/04/02 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技