基于HTML/CSS/JS的聊天机器人界面实现-优快云博客

本文链接：https://blog.youkuaiyun.com/longjunx/article/details/132952373

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>01.聊天机器人</title>
	<!-- 字体图标 -->
	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
	<!-- 初始化样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
	<!-- 公共 -->
	<style>
	* {
	box-sizing: border-box;
	}

	html,
	body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	.container {
	width: 100%;
	height: 100%;
	background-color: #f5f4f4;
	position: relative;
	display: flex;
	flex-direction: column;
	}
	</style>
	<!-- 头部 -->
	<style>
	.top {
	width: 100%;
	height: 44px;
	padding: 15px 7px 12px 21px;
	background-color: #f5f4f4;
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	}
	</style>
	<!-- 好友名字 -->
	<style>
	.friend_name {
	width: 100%;
	height: 44px;
	padding: 14px 19px 14px;
	background-color: #f5f4f4;
	text-align: center;
	position: fixed;
	top: 44px;
	left: 0;
	}

	.friend_name img {
	width: 10px;
	height: 16px;
	position: absolute;
	left: 19px;
	}
	</style>
	<!-- 聊天区域 -->
	<style>
	.chat {
	width: 100%;
	/* 顶部留出88px的2个头部导航的高度 */
	/* 底部留出89px内边距让出固定在底部的对话框-防止遮挡 */
	/* 再多留出10px, 最后一条消息距离底部 */
	padding: 88px 20px 99px;
	flex: 1;
	overflow-y: scroll;
	}

	/* 隐藏滚动条 */
	.chat::-webkit-scrollbar {
	display: none;
	}

	.chat ul {
	padding-top: 20px;
	}

	.chat img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	}

	.chat li {
	display: flex;
	align-items: top;
	}

	.chat li~li {
	/* 除了第一个li, 选择所有的兄弟li标签 */
	margin-top: 20px;
	}

	.chat .right {
	display: flex;
	justify-content: flex-end;
	}

	.left span {
	margin-left: 10px;
	border-radius: 1px 10px 1px 10px;
	display: inline-block;
	padding: 12px 16px;
	background-image: linear-gradient(180deg, #B1E393 0%, #50D287 100%);
	box-shadow: 2px 2px 10px 0px rgba(201, 201, 201, 0.1);
	color: #FFFFFF;
	}

	.right span {
	margin-right: 10px;
	border-radius: 1px 10px 1px 10px;
	display: inline-block;
	padding: 12px 16px;
	background: #FFFFFF;
	border: 1px solid rgba(247, 247, 247, 1);
	color: #000000;
	}
	</style>
	<!-- 底部区域(发送消息) -->
	<style>
	.bottom_div {
	width: 100%;
	height: 89px;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	box-shadow: 0px -5px 7px 0px rgba(168, 168, 168, 0.05);
	border-radius: 25px 25px 0px 0px;
	padding: 15px 15px 0px 15px;
	}

	/* 外框盒子 */
	.send_box {
	display: flex;
	}

	.send_box img {
	width: 34px;
	height: 34px;
	}

	/* 输入框背景 */
	.input_bg {
	height: 35px;
	background: #f3f3f3;
	border-radius: 50px;
	padding-left: 17px;
	flex: 1;
	margin-right: 15px;
	/* 让input宽度高度 */
	display: flex;
	}

	.input_bg input {
	border: 0;
	outline: 0;
	background-color: transparent;
	display: inline-block;
	width: 100%;
	}



	/* 修改输入框默认占位文字
	webkit内核, firefox18-, firfox19+, 其他
	*/
	.input_bg input::-webkit-input-placeholder,
	.input_bg input:-moz-placeholder,
	.input_bg input::-moz-placeholder,
	.input_bg input:-ms-input-placeholder {
	font-family: PingFangSC-Regular;
	font-size: 26px;
	color: #C7C7C7;
	letter-spacing: 0;
	font-weight: 400;
	}

	/* 底部黑色小条 */
	.black_border {
	margin-top: 10px;
	height: 34px;
	text-align: center;
	}

	.black_border span {
	display: inline-block;
	background-color: #000;
	width: 105px;
	height: 4px;
	border-radius: 50px;
	}
	</style>
	<!-- PC端单独适配成移动大小 -->
	<style>
	/* PC端居中显示手机 */
	@media screen and (min-width: 1200px) {
	.container {
	width: 375px;
	margin: 0 auto;
	border: 1px solid black;
	/* 让fixed固定定位标签参照当前标签 */
	transform: translate(0px);
	}
	}
	</style>
	</head>

	<body>
	<div class="container">
	<!-- 头部 -->
	<div class="top">
	<span>9:41</span>
	<div class="icon">
	<i class="iconfont icon-xinhao"></i>
	<i class="iconfont icon-xinhao1"></i>
	<i class="iconfont icon-electricity-full"></i>
	</div>
	</div>
	<!-- 好友名字 -->
	<div class="friend_name">
	<img src="./assets/arrow-left.png" alt="">
	<span>使劲夸夸</span>
	</div>
	<!-- 聊天区域 -->
	<div class="chat">
	<ul class="chat_list">
	<!-- 他的消息 -->
	<li class="left">
	<img src="./assets/you.png" alt="">
	<span>小宝贝</span>
	</li>
	<!-- 我的消息 -->
	<li class="right">
	<span>干啥</span>
	<img src="./assets/me.png" alt="">
	</li>
	</ul>
	</div>
	<!-- 底部固定 -->
	<div class="bottom_div">
	<!-- 发送消息 -->
	<div class="send_box">
	<div class="input_bg">
	<input class="chat_input" type="text" placeholder="说点什么吧">
	</div>
	<img class="send_img" src="./assets/send.png" alt="">
	</div>
	<!-- 底部黑条 -->
	<div class="black_border">
	<span></span>
	</div>
	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	// 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot
	// 查询参数名: spoken
	// 查询参数值: 我说的消息

	// 聊天区域div
	let chatDiv = document.querySelector('.chat')
	// 聊天容器ul
	let chatUL = document.querySelector('.chat_list')
	// 发送消息input
	let sendInput = document.querySelector('.chat_input')

	// 聊天逻辑函数
	let chatFn = () => {
	// 2. 获取输入框内容-并显示到页面上
	let sendText = sendInput.value
	chatUL.innerHTML += `<li class="right">
	<span>${sendText}</span>
	<img src="./assets/me.png" alt="">
	</li>`
	// 清空输入框内容
	sendInput.value = ''
	// 让滚动条始终在底部
	chatDiv.scrollTop = chatDiv.scrollHeight
	// 3. 调用接口, 获取机器人返回消息
	axios({
	url: 'http://hmajax.itheima.net/api/robot',
	params: {
	spoken: sendText
	}
	}).then(result => {
	// 4. 把机器人消息设置到页面上
	chatUL.innerHTML += `<li class="left">
	<img src="./assets/you.png" alt="">
	<span>${result.data.data.info.text}</span>
	</li>`
	// 让滚动条始终在底部
	chatDiv.scrollTop = chatDiv.scrollHeight
	})
	}

	// 1. 发送消息-绑定点击事件
	document.querySelector('.send_img').addEventListener('click', chatFn)

	// 优化-集成回车-发送消息
	document.querySelector('.chat_input').addEventListener('keyup', e => {
	if (e.keyCode === 13) {
	chatFn()
	}
	})

	</script>
	</body>

	</html>

AJAX聊天机器人