原生js模拟微信聊天记录

最新推荐文章于 2024-04-21 13:55:09 发布

每一天，每一步

最新推荐文章于 2024-04-21 13:55:09 发布

阅读量1k

点赞数

分类专栏： javaScript 文章标签：微信 css html5 JavaScript

本文链接：https://blog.csdn.net/u010234868/article/details/120380021

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>微信聊天窗口</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑'
		}

		#container {
			width: 450px;
			height: 600px;
			background: #eee;
			margin: 10px auto 0;
			position: relative;
			box-shadow: 0px 0px 16px #999;
			overflow: hidden;
		}

		.header {
			background: #000;
			height: 34px;
			color: #fff;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			padding: 0 10px;
		}

		.footer {
			width: 430px;
			height: 40px;
			background: #999;
			position: fixed;
			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;
			height: 38px;
			background: #ccc;
			font-weight: 900;
			line-height: 38px;
			cursor: pointer;
			text-align: center;
			position: absolute;
			right: 10px;
			top: 14px;
			border-radius: 6px;
		}

		.footer span:hover {
			color: #777;
			background: #ddd;
		}

		.icon {
			display: inline-block;
			background: red;
			width: 50px;
			height: 50px;
			border-radius: 30px;
			position: absolute;
			bottom: 3px;
			left: 10px;
			cursor: pointer;
			overflow: hidden;
		}

		img {
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}

		.content {
			font-size: 20px;
			width: 435px;
			height: 662px;
			overflow: auto;
			padding: 5px;
		}

		.content li {
			margin-top: 10px;
			padding-left: 10px;
			width: 412px;
			display: block;
			clear: both;
			overflow: hidden;
		}

		.content li img {
			float: left;
		}

		.content li span {
			background: #7cfc00;
			padding: 10px;
			border-radius: 10px;
			float: left;
			margin: 6px 10px 0 10px;
			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;
			background: #fff;
		}

		.content li span.spanright {
			float: right;
			background: #7cfc00;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>

		<ul class="content"></ul>

		<div class="footer">
			<div class="icon"> <img src="images/1.png" alt="" id="icon"> </div>
			<input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div>
	</div>
</body>
<script src="js/common.js"></script>
<script>
	// 获取元素
	var icon =  my$('icon');
	var text =  my$('text');
	var btn =  my$('btn');
	var content = document.getElementsByTagName('ul')[0];
	var imgArr = ['images/1.png', 'images/2.png'];
	// 点击左下角头像可以切换图片
	var flag = 0;
	icon.onclick = function () {
		if (flag === 0) {
			icon.src = 'images/2.png';
			flag = 1;
		} else {
			icon.src = 'images/1.png';
			flag = 0;
		}
	}
	// 点击发送按钮，将内容和头像显示到content中
	btn.onclick = function () {
		var value = text.value;
		var li = document.createElement('li');
		var span =  document.createElement('span');
		setInnerText(span, value);
		var img =  document.createElement('img');
		img.src = imgArr[flag];
		li.appendChild(img);
		li.appendChild(span);
		content.appendChild(li); // 不带[0]获取的是html集合，会报错
		text.value = '';
		// 不同用户内容左右显示
		if (flag === 0) {
			img.className = 'imgright';
			span.className = 'spanright';
		} else {
			img.className = 'imgleft';
			span.className = 'spanleft';
		}
	}
	
	
</script>

</html>

common.js：

// 通过id获取元素
function my$(element) {
	var el = document.getElementById(element);
	return el;
}

// innerText textContent 兼容性处理
function setInnerText(element, content) {
	if (typeof element.innerText === 'string') {
		element.innerText = content;
	} else {
		element.textContent = content;
	}
}

每一天，每一步

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
原生js模拟微信聊天记录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信聊天窗口</title> <style> * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #container { width: 450px;.
复制链接

扫一扫

专栏目录