js实现微信界面

最新推荐文章于 2024-08-06 13:43:08 发布

红豌豆

最新推荐文章于 2024-08-06 13:43:08 发布

阅读量862

点赞数

分类专栏：前端文章标签： javascript 微信 css3

本文链接：https://blog.csdn.net/qq_64353584/article/details/123365803

版权

该博客详细介绍了如何使用JavaScript和CSS3构建一个类似微信的聊天界面，包括布局设计、消息页面的样式、头像切换逻辑、时间显示、信息滚动效果以及输入框和发送按钮的实现。重点内容涵盖不同消息类型的布局、头像切换技巧以及元素获取和操作。

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

布局思路

需求：

两个用户聊天会切换头像

点击发送会将用户输入的信息输出到界面上

消息页面布局

对方发送信息的布局

自己发送消息的布局

顶部的bar

显示昵称

显示当前时间

内容区域

展示自己和对方的发送的结果信息

信息高度到达最大高度，实现内容当前信息向上滚动展示

三大区域

展示用户昵称和时间的Bar
展示用户发送的信息显示的内容content[如果需要实现自动滚动效果，需要在套上一个div，定位模式relative——子绝父相]
底部展示输入框和发送按钮。

*切换用户头像技巧

声明一个标识为tag的变量，根据tag的值来确定是自己的头像还是对方的图片

	var tag = 0;
	if(tag==0){
   
			img.src=arr[1];
			tag=1;
		}else{
   
			img.src=arr[0];
			tag=0;
		}

*图片的地址或位置也可以存入数组中

var arr=['./images/1.png','./images/2.png'];

小技巧
document.getElementsByClassName(‘r’); 通过类名获取元素，返回值是数组

var times = document.getElementsByClassName(‘r’);
console.log(times[0].children[0].innerHTML);

具体实例请参考如下


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>微信</title>
	<style>
	*{
    
		padding: 0;
		margin: 0;
		list-style: none;
		font-family: '微软雅黑';
	}
	#container{
    
		width: 450px;
		height: 600px;
		background-color: #eee;
		margin: 10px auto;
		position: relative;
		box-shadow: 0 0 16px #999;
	}
	.header{
    
		height: 40px;
		background: black;
		color: white;
		line-height: 40px;
		font-size: 20px;
		padding: 0 10px;
	}
	.footer{
    
		width: 430px;
		height: 40px;
		background-color: #999;
		position: absolute;
		bottom: 0;
		padding