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 ...

web前端网页智能机器人

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

最新文章

热门文章

web前端 网页智能机器人

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

最新文章

热门文章

web前端网页智能机器人

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