简单实现自动聊天_css实现聊天消息自动-优快云博客

本文链接：https://blog.youkuaiyun.com/high32/article/details/111393627

在这里插入图片描述

用到的知识:
- 1.简单css布局;
- 2.ajax交互
- 3.跨域访问jsonp
- 4.element.scrollTop = element.scrollHeight;//滚动条自动跳到最底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="font/iconfont.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			.icon {
			  width: 1.25em;
			  height: 1.25em;
			  vertical-align: -0.15em;
			  /* fill: currentColor; */
			  overflow: hidden;
				margin-right: 5px;
			}
			.box{
				width: 300px;
				height: 400px;
				border: 1px solid;
				margin: 100px auto;
				display: flex;
				flex-direction: column;
			}
			section{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: royalblue;
				color: #fff;
			}
			section a{
				color: #fff;
				float: right;
				display: block;
				border: 1px solid #fff;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				margin-top: 1px;
				margin-right: 5px;
			}
			h3{
				float: left;
				font-weight: normal;
			}
			main{
				flex: 1;
				overflow-y: auto;
			}
			.input{
				width: 100%;
				height: 100px;
				border-top: 1px solid;
			}
			.input textarea{
				width: 85%;
				height: 98px;
				float: left;
				resize: none;
			}
			.input button{
				float: right;
				margin-top: 50px;
				margin-right: 3px;
			}
			footer{
				height: 30px;
				line-height: 30px;
				width: 100%;
				background-color: skyblue;
				text-align: center;
				color: #fff;
			}
			.left,.right{
				border-radius: 5px;
				margin:3px auto;
			}
			.left{
				float: left;
				background-color: lightcoral;
			}
			.right{
				float: right;
				background-color: lavender;
			}
			.clearfix{
				clear: both;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<section>
				<h3><svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-yu"></use>
</svg>七鱼云客服</h3>
				<a href="#">人工客服</a>
			</section>
			<main></main>
			<div class="input">
				<textarea></textarea>
				<button type="button">发送</button>
			</div>
			<footer>七鱼云客服</footer>
		</div>
	</body>
</html>
<script type="text/javascript">
	let oBtn = document.querySelector("button");
	let oText = document.querySelector("textarea");
	let oMain = document.querySelector("main");
	oBtn.onclick = function(){
		if(oText.value != ""){
			let oDiv = document.createElement("div");
			oDiv.className = "right clearfix";
			oDiv.innerHTML =  `${oText.value}<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-icon-test1"></use>
</svg>`;;
			oMain.appendChild(oDiv);
			oMain.scrollTop = oMain.scrollHeight;
			receive();
			oText.value = "";
		}
	}
	function receive(){
		let xhr = new XMLHttpRequest();
		xhr.open("get","05brain.php?username=" + oText.value,true);
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				// console.log(xhr.responseText);
				fun(xhr.responseText);
			}
		}
	}
	function fun(resText){
		let json = JSON.parse(resText);
		let oDiv = document.createElement("div");
					oDiv.className = "left clearfix";
					oDiv.innerHTML =  `<svg class="icon" aria-hidden="true">
		  <use xlink:href="#icon-icon-test"></use>
		</svg>${json.content}`;
					oMain.appendChild(oDiv);
					oMain.scrollTop = oMain.scrollHeight;//将滚动条自动跳到最底部
	}
</script>

<?php
	header("Content-type:text/html;charset=utf-8");
	$name = $_GET['username'];
	$result = file_get_contents("http://api.qingyunke.com/api.php?key=free&appid=0&msg=" . $name);
	echo "$result";
?>