前端开发之简易聊天框

LSY-Web-programmer

已于 2023-03-28 21:19:46 修改

阅读量1.5k

点赞数 1

文章标签： css html 前端

于 2023-03-28 20:00:11 首次发布

本文链接：https://blog.csdn.net/m0_46631458/article/details/129823504

版权

该文章展示了一个基本的HTML页面结构，包括一个输入框和发送按钮，用于创建一个简单的聊天界面。CSS用于设置页面和元素的样式，如容器的宽度、背景色和内容对齐。JavaScript部分实现了发送消息的功能，生成随机颜色，并根据消息数量决定文本在左侧或右侧显示。

摘要由CSDN通过智能技术生成

页面效果展示

HTMl代码布局页面

<body>
	<div class="container">
		<div class="showcon" id="showcon"></div>
		<input type="text" id="msg" />
		<button onclick="send()">发送</button>
	</div>
</body>

CSS样式部分

    <style>
			.container {
				width: 600px;
				text-align: center;
				padding: 20px 0;
				margin: 0 auto;
				background-color: green;
			}
			.container .showcon {
				width: 550px;
				height: 400px;
				padding: 10px;
				overflow: auto;
				background-color: #fff;
				margin: 0 auto 10px;
			}
			#msg {
				width: 500px;
				height: 40px;
			}
			.container button {
				width: 50px;
				height: 40px;
				vertical-align: middle;
			}
	</style>

JavaScript部分

<script>
		var i = 0;
		function send() {
			var _ipt = document.getElementById('msg');
			// 判断输入内容不为空
			if (_ipt.value === '') {
                alert('输入内容不能为空');
				return;
			}else{
                i++;
            }

            var _div = document.querySelector(".showcon");

			// 定义字体颜色
			var r = randColor();
			var g = randColor();
			var b = randColor();

			// 输入内容在左侧还是右侧 判断 i是奇数聊天内容在左侧 i是偶数聊天内容在右侧
			if (i % 2 === 1) {
				_div.innerHTML += `<p style='text-align:left;color:rgb(${r},${g},${b})'>${_ipt.value}</p>`;
			} else {
				_div.innerHTML += `<p style='text-align:right;color:rgb(${r},${g},${b})'>${_ipt.value}</p>`;
			}

			_ipt.value = ''; //清空输入框的输入内容
		}

        // math.floor() 函数用来返回数字的下舍整数，即它总是将数值向下舍入为最接近的整数
		function randColor() {
			return Math.floor(Math.random() * 256);
		}
</script>