js实现微信界面-CFANZ编程社区

三大区域

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

*切换用户头像技巧

	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’); 通过类名获取元素，返回值是数组

具体实例请参考如下


<!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: 10px;
	}
	.footer input{
		width: 300px;
		height: 38px;
		outline: none;
		font-size: 16px;
		text-indent: 10px;
		position: absolute;
		border-radius: 6px;
		right: 80px;
	}
	.footer span{
		display: inline=block;
		width: 62px;
		background-color: #ccc;
		font-weight: 900;
		line-height: 38px;
		cursor: pointer;
		text-align: center;
		position: absolute;
		right: 10px;
		top: 14px;
	}
	.footer span:hover{
		color: #777;
		background-color: #ddd;
	}
	.icon{
		display: inline-block;
		background-color: red;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		position: absolute;
		left: 10px;
		bottom: 3px;
		cursor: pointer;
		overflow: hidden;
	}
	img{
		width: 60px;
		height: 60px;
		border-radius: 8px;
	}
	#scr{
		position: relative;
		height: 500px;
		overflow: hidden;
	}
	.content{
		position: absolute;
		font-size: 20px;
		width: 435px;
		/* height: 490px; */
		overflow: auto;
		padding: 5px;
		background-color: #eee;
	}
	.content li{
		margin-top: 10px;
		padding-left: 10px;
		width: 412;
		display: block;
		clear: both;
		overflow: hidden;
	}
	.content li img{
		float: left;
	}
	.content li span{
		background-color: #7cfc00;
		padding: 10px;
		border-radius: 10px;
		float: left;
		margin: 6px 10px 0 10px;  /* 上6 右边10 下0 左10 */
		max-width: 310px;
		border: 1px solid #ccc;
		box-shadow: 0 0 3px #ccc;
	}
	.content li img.imgLeft{
		float: left;
	}
	.content li img.imgRight{
		float: right;
	}
	.content li span.spanLeft{
		float: left;
	}
	.content li span.spanRight{
		float: right;
	}
	
	</style>
</head>
<body>
		<div id="container">
			<div class="header r">
				<span style="float: right;">20:30</span>
				<span style="float: left;">小妹客服聊天中</span>
			</div>
			<div id="scr">
				<ul class="content"> <!-- 内容区域start -->
					<!-- <li>
						<img src="images/1.png">
						<span>来咨询一下，您的相关问题</span>
					</li> -->
				</ul> <!-- 内容区域end -->
			</div>
			
			<div class="footer">
				<div class="icon">
					<img src="images/1.png" id="icon" >
				</div>
				<input id="text" type="text" placeholder="晴说点什么？"/>
				<span id="btn">发送</span>
			</div>
		</div>
</body>

<script type="text/javascript">
	//思路：
	// 1.有两个用户
	// 两个用户在一起聊天
	// 点击图片可以实现切换用户
	// 2.点击发送内容
	// 将内容显示在聊天区域
	// 设定聊天在不同的区域
	//1.获取图片标签
	var img = document.getElementById('icon'); //用户头像
	var arr=['./images/1.png','./images/2.png'];
	var tag = 0;
	//2.给图片添加点击事件 用于切换用户头像
	// img.οnclick=function(){
		
	// }
	//3.获取发送按钮
	var btn = document.getElementById('btn');
	var num=-1; //统计聊天记录
	btn.onclick=function(){
		//3.1判断用户输入内容是否为空
		var text = document.getElementById('text').value;
		if(text==''){
			alert('聊天内容不能为空哦~~');
			return;
		}else{
			//已经获取到内容
			var contents = document.getElementById('container').children[1].children[0]; //ul
			// alert(contents);
			contents.innerHTML+='<li><img src='+arr[tag]+'><span>'+text+'</span></li>';
		}
		//2.1根据显示图片切换用户头像
		if(tag==0){
			img.src=arr[1];
			tag=1;
		}else{
			img.src=arr[0];
			tag=0;
		}
		
		//获取内容区域下的img span
		var userIcon = contents.getElementsByTagName('img');
		var usserspan = contents.getElementsByTagName('span');
		num++;
		console.log(userIcon[num]);
		if(tag==0){
			userIcon[num].className='imgLeft';
			usserspan[num].className='spanLeft';
		}else{
			userIcon[num].className='imgRight';
			usserspan[num].className='spanRight';
		}
		//4.清空聊天记录
		document.getElementById('text').value='';
		//
		checkTheHeight(contents);
	}

function checkTheHeight(contents){
	// console.log(contents.clientHeight);
	//console.log(contents.offsetHeight); //500
	//console.log(contents.children[0].offsetHeight);
	var scr = document.getElementById('scr');
	var len = contents.children.length-1;
	//console.log(len);
	if(len){
		if(contents.offsetHeight>scr.clientHeight){
			contents.style.top=contents.offsetTop-contents.children[len].offsetHeight-10+'px';
		}
	}	
}
//刷新时间
setInterval(function(){
	var date = new Date();
	var day = date.getDay(); //星期
	var month = date.getDate(); //月份
	var hour = date.getHours();
	var minute = date.getMinutes();
	var times = document.getElementsByClassName('r');
	//console.log(hour+' : '+minute); 
	// console.log(times[0].children[0].innerHTML);
	times[0].children[0].innerHTML=hour+':'+minute;
},1000);
	
</script>
</html>

网页聊天模仿微信界面效果