<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5模拟微信聊天界面</title>
    <script src="js/jquery-1.9.1.js"></script>
    <style>
        /**重置标签默认样式*/

* {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        }

#container {
            width: 450px;
            height: 780px;
            background: #eee;
            margin: 80px auto 0;
            position: relative;
            box-shadow: 20px 20px 55px #777;
        }

.header {
            background: #000;
            height: 40px;
            color: #fff;
            line-height: 34px;
            font-size: 20px;
            padding: 0 10px;
        }

.footer {
            width: 430px;
            height: 50px;
            background: #666;
            position: absolute;
            bottom: 0;
            padding: 10px;
        }

.footer input {
            width: 360px;
            height: 45px;
            outline: none;
            font-size: 20px;
            text-indent: 10px;
            position: absolute;
            border-radius: 6px;
            right: 80px;
        }

.footer span {
            display: inline-block;
            width: 62px;
            height: 48px;
            background: #ccc;
            font-weight: 900;
            line-height: 45px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            border-radius: 6px;
        }

.footer span:hover {
            color: #fff;
            background: #999;
        }

#user_face_icon {
            display: inline-block;
            background: red;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            position: absolute;
            bottom: 6px;
            left: 14px;
            cursor: pointer;
            overflow: hidden;
        } */

img {
            width: 60px;
            height: 60px;
        }

.content {
            font-size: 20px;
            width: 500px;
            height: 502px;
            overflow: auto;
            padding: 5px;
        }

.content li {
            margin-top: 10px;
            padding-left: 10px;
            width: 412px;
            display: block;
            clear: both;
            overflow: hidden;
        }

.content li img {
            float: left;
        }

.content li span {
            background: #7cfc00;
            padding: 10px;
            border-radius: 10px;
            float: left;
            margin: 6px 10px 0 10px;
            max-width: 310px;
            border: 1px solid #ccc;
            box-shadow: 0 0 3px #ccc;
        }

.content li img.imgleft {
            float: left;
        }

.content li img.imgright {
            float: right;
        }

.content li span.spanleft {
            float: left;
            background: #fff;
        }

.content li span.spanright {
            float: right;
            background: #7cfc00;
        }
    </style>

</head>

<body>
<div id="container">
    <div class="header">
        <span style="float: left;">图灵机器人</span>

</div>
    <ul class="content">
        <li v-for="(item, index) in messageList" >

<img :src="'./img/'+(item.isSelf?'r.png':'l.png')" :class="'img'+(item.isSelf?'right':'left')">
            <span :class="'span'+(item.isSelf?'right':'left')">{{item.message}}</span>
        </li>
    </ul>

<div class="footer">
        <!-- 添加输入内容 -->
        <input id="text" type="text" placeholder="说点什么吧..." v-model="inputValue" @keyup.enter="chat">
        <!-- 给发送也绑定一个事件 -->
        <span id="btn" @click="chat">发送</span>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
<script>
    /*
     思路分析:
     一.定义聊天信息数组格式

[
     {
     message:'',
     isSelf:true(自己)/false(机器人)
     }
     ]

二.获取自己输入内容,将内容渲染到页面

三.获取机器人接口内容,也将内容渲染到页面

*/

//一:

let app = new Vue({
        el: "#container",
        data: {
            //输入内容,双向数据绑定
            inputValue: '',
            //聊天窗口内容
            messageList: []
        },
        methods: {
            time: function(){

},
            chat() {
                // console.log(this.inputValue);
                // console.log(this);
                // 二.获取自己输入内容,将内容渲染到页面
                this.messageList.push({
                    message: this.inputValue,
                    isSelf: true
                })
                // 三.获取机器人接口内容,也将内容渲染到页面
                $.ajax({
                        url:'http://www.tuling123.com/openapi/api',
                        data:{
                            userid:1,//添加id,实现上下文连贯
                            key:'b6ef78a0c1f24fee90d2317139b9c3d5',
                            info:this.inputValue

},
                        // 注意使用箭头函数,不然里面的this会发生变化
                        success:(obj)=>{
                        console.log(obj);

// 三.获取机器人接口内容,也将内容渲染到页面
                this.messageList.push({
                    message:obj.text,
                    isSelf:false
                })
            }

})
                this.inputValue='';   //最后清除文本框
            }
        },
    })

</script>
</html>

另外还需要安装jquery-js才能使用智能机器人

web前端 网页智能机器人相关推荐

  1. web前端网页设计作业_网页前端设计快速入门技巧

    我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...

  2. web前端网页开发离不开的三要素:HTML、CSS、JavaScript

    前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...

  3. web前端 网页加载 性能优化大全

    web前端 性能优化 - - 如何提高网页加载速度 文章目录 web前端 性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求 浏览器 ...

  4. WEB前端 网页设计 简介

    目录 web前端简介 什么是HTML? HTML标签 HTML基本结构 在head中设置网页标题和字符集编码 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HT ...

  5. 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)电影网页介绍8页 带报告3900字

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生 ...

  6. 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  7. 基于HTML+CSS+JS制作商城(web前端网页制作课作业)--7古典乐器网 8页

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...

  8. 用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...

  9. 基于Html+JS+CSS的环保生态Web前端网页设计 课程设计报告+源码

    资源下载地址:https://download.csdn.net/download/sheziqiong/85731023 资源下载地址:https://download.csdn.net/downl ...

最新文章

  1. Silverlight4 入门GetStart
  2. AC日记——魔方 洛谷 P2007
  3. 用oracle的ODP.NET创建实体数据模型
  4. Redis 总结精讲
  5. spring学习(42):属性注入注入数组和列表的说明
  6. java 在数组末尾添加元素_Java快问快答:用 ArrayList 还是 LinkedList?
  7. 运维自动化之使用PHP+MYSQL+SHELL打造私有监控系统(四)
  8. Spark读写HBase(主要讲解SHC的使用)
  9. [4.14校内训练赛by hzwer]
  10. matlab 带积分的方程,在Matlab中实现积分方程的迭代解
  11. postman环境设置
  12. 使用 FUMA 鉴定 Independent SNPs 和 Lead SNPs
  13. java opts配置_JAVA_OPTS设置
  14. html手机陀螺儀页面,详解html5如何获取手机陀螺仪角度信息的示例代码
  15. Exception:org.eclipse.m2e.wtp.MarkedException: Unable to configure OHBC
  16. Excel 分组统计不重复项
  17. docker-compose安装nginx配置hppts 报错
  18. (转)Nagios 配置及监控
  19. matlab计算图像周长,图像处理——周长、面积计算(Matlab).doc
  20. FTP登录时一直弹出登录窗口,就算输入正确的账号密码也不能登录

热门文章

  1. 23种设计模式-概述
  2. IIS中FTP登陆用户名密码都对但进不去的另一种原因
  3. 通达信指标公式常用绘图函数(4)——颜色、线形粗细、线型等修饰函数
  4. MSP430时钟设置及应用总结
  5. DL4J的矩阵处理模块ND4J的常用函数整理
  6. $NOIP2016$天天爱跑步
  7. java进出货管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
  8. C语言实现SMTP发邮件
  9. m118w重置墨粉_富士施乐 M115b/f/M115fs, DocuPrint M118 w/M118 z 加粉复位清零大全
  10. pandas表格行列互换