web前端 网页智能机器人
<!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前端 网页智能机器人相关推荐
- web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
- web前端网页开发离不开的三要素:HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
- web前端 网页加载 性能优化大全
web前端 性能优化 - - 如何提高网页加载速度 文章目录 web前端 性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求 浏览器 ...
- WEB前端 网页设计 简介
目录 web前端简介 什么是HTML? HTML标签 HTML基本结构 在head中设置网页标题和字符集编码 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HT ...
- 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)电影网页介绍8页 带报告3900字
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生 ...
- 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 基于HTML+CSS+JS制作商城(web前端网页制作课作业)--7古典乐器网 8页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...
- 用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...
- 基于Html+JS+CSS的环保生态Web前端网页设计 课程设计报告+源码
资源下载地址:https://download.csdn.net/download/sheziqiong/85731023 资源下载地址:https://download.csdn.net/downl ...
最新文章
- 11岁姑娘挑战8分钟编程小程序!蚂蚁金服董事长井贤栋:欢迎加入
- android注册广播监听按钮,Android实现广播监听HOME键操作
- 【mysql】DATE_FORMAT()日期格式化
- .NET中Flags枚举的使用
- C++对象的赋值和复制
- _系列 | 全自动泊车辅助F-APA简介(系列一)
- 一次面试留下的实际应用问题。关于HttpModule,IIS集成模式。
- 130号:SpringBoot使用AOP
- Android 文件系统路径
- easyui图标代码
- php网站后台不显示验证码,网站后台验证码不显示原因
- php整数溢出 ctf,PWN INTEGER OVERFLOW 整数溢出
- 益聚星荣:如何有理有据地给元宇宙泼一盆冷水?
- 记录Notepad软件保护眼睛的颜色怎么设置
- 端口映射、SNAT(源网络地址转换)
- DTU配置工具-F2x16工具
- 【倡议】大家都说说自己能跑Ubuntu 的电脑
- 如何在mac里安装vmware,在mac里安装虚拟机,如何注册vmware
- 超级账本成员身份管理
- 404 not found nginx是什么意思_如何在BT面板基于nginx环境安装配置Perfex CRM网站