jquery实现聊天机器人

网络编程 2024/12/24 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

本文实例为大家分享了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="/UploadFiles/2021-04-02/5.jpg">

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="/UploadFiles/2021-04-02/${role == 'mine' ">

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

jquery,聊天,机器人

标签：

jquery,聊天,机器人

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“jquery实现聊天机器人”

暂无评论...

www.bzswh.com 幽灵资源网

143,552互联网资源

29,117高清电影

46,608技术教程

224,608站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

jquery实现聊天机器人

jquery,聊天,机器人

jQuery实现聊天对话框

js实现踩五彩块游戏

评论“jquery实现聊天机器人”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接