js创建简易的聊天窗口

最新推荐文章于 2022-10-26 20:55:43 发布

crazyFlex

最新推荐文章于 2022-10-26 20:55:43 发布

阅读量285

点赞数

文章标签： js

本文链接：https://blog.csdn.net/crazyFlex/article/details/103500371

版权

在这里插入代码片<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		section {
			width: 400px;
			padding: 10px;
			border: solid black 1px;
			float: left;
			margin-left: 20px;
		}

		.context {
			width: 400px;
			height: 300px;
			border: 1px dashed #C1C1C1;
			overflow: scroll;
			margin-bottom: 10px;
		}

		textarea {
			width: 400px;
			height: 100px;
		}

		button {
			width: 100px;
		}
	</style>
</head>

<body>
	<section>
		<div class="context">

		</div>
		<textarea></textarea>
		<button id="btn1">发送</button>
	</section>
	<section>
		<div class="context">

		</div>
		<textarea></textarea>
		<button id="btn2">发送</button>
	</section>
</body>

</html>

<script type="text/javascript">
	//通过id名称获取元素对象
	function $id(idName) {
		return document.getElementById(idName);
	}
	var cont1 = document.getElementsByClassName("context")[0];
	var cont2 = document.getElementsByClassName("context")[1];
	var btn1 = $id("btn1");
	var btn2 = $id("btn2");
	var text1 = document.getElementsByTagName("textarea")[0];
	var text2 = document.getElementsByTagName("textarea")[1];

	function toDB(num) {
		return num < 10 ? "0" + num : num;
	}
	function time() {//获取时间
		return toDB(new Date().getFullYear()) + '/' + toDB(new Date().getMonth()) + '/' + toDB(new Date().getDate()) + '   ' + toDB(new Date().getHours()) + ':' + toDB(new Date().getMinutes()) + ':' + toDB(new Date().getSeconds())
	}


	btn1.onclick = function () {
		cont2.innerHTML += '<div><span>' + time() + '</span><p>' + text1.value + '</p></div>';
		cont1.innerHTML += '<div style="text-align:right"><span>' + time() + '</span><p>' + text1.value + '</p></div>';
		cont1.scrollTop = cont1.scrollHeight;//滚动条距离顶部=滚动的高度。保持显示最新内容。
	}
	btn2.onclick = function () {
		cont1.innerHTML += '<div><span>' + time() + '</span><p>' + text2.value + '</p></div>';
		cont2.innerHTML += '<div style="text-align:right"><span>' + time() + '</span><p>' + text2.value + '</p></div>';
		cont2.scrollTop = cont2.scrollHeight;
	}

	document.onkeydown = function (eve) {//ctrl+回车发送消息。
		var e = eve || event;
		var code = e.keyCode || e.which || e.charCode;
		if (e.ctrlKey && code === 13 && document.activeElement == text1) {//文本框聚焦时才可使用组合键。
			btn1.onclick();
		} else if (e.ctrlKey && code === 13 && document.activeElement == text2) {
			btn2.onclick();
		}
	}
</script>

生成两个简易聊天窗口。可以用组合键发送消息。自己发送的消息显示在右。对方发送的消息显示在左。