简易的聊天界面

最新推荐文章于 2024-08-06 12:58:11 发布

m0_63514794

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量63

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_63514794/article/details/126185106

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				list-style: none;

			}

			div {
				width: 300px;
				height: 400px;
				border: 1px solid black;
				margin: 20px 0px 10px;
			}
		</style>
	</head>
	<body>
		<!-- 实现一个简易的聊天界面，点击下方按钮，能把输入框中的聊天内容显示在上方的聊天框里。 -->
		<div id="first"></div>
		<input type="text" id="second" size="28" />
		<input type="button" onclick="third()" value="send" />
		<script type="text/javascript">
			function third() {
				var _second = document.querySelector('#second');
				var _first = document.querySelector('#first');
				_first.innerHTML += `<li>${_second.value}</li>`;
				_second.value = "";
			}
		</script>
	</body>
</html>