JS实现简易聊天室

最新推荐文章于 2025-05-19 12:31:59 发布

原创最新推荐文章于 2025-05-19 12:31:59 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js简易聊天

js简单案例同时被 2 个专栏收录

12 篇文章

订阅专栏

8 篇文章

订阅专栏

仅供参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 300px;
				height: 310px;
				border: 1px solid cornflowerblue;
				margin: 10px auto;

			}

			#box01 {
				width: 280px;
				height: 250px;
				overflow: auto;
				margin: 10px;
				border: 1px solid #CECECE;
			}

			#txt {
				width: 230px;
				height: 18px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box01"></div>
			<input type="text" id="txt" placeholder="ctrl+Enter发送" />
			<input type="button" id="btn" value="发送" />
		</div>
		<script type="text/javascript">
			var oBox = document.getElementById("box01");
			var oTxt = document.getElementById("txt");
			var oBtn = document.getElementById("btn");
		
			function msg() {
				var val = oTxt.value;
				oBox.innerHTML += '<p>' + val + '</p>'
				oBox.scrollTop = oBox.scrollHeight; //让滚动条一直处于底部
				
				oTxt.value=""; //发送完成侯情况输入框
			}
			oBtn.onclick = msg;
			document.onkeydown = function(e) {
				var e = e || window.event;
				if (e.ctrlKey && e.keyCode == 13 ||e.keyCode ==13) {
					msg();
				}
			}
		</script>

	</body>
</html>