原生js微信互动聊天界面代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是原生js微信互动聊天界面代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>微信聊天</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/my.js" ></script>
</head>
<body>
<div class="outer">
	<div class="box">
		<div class="chat">
			<div class="top">
				<span class="">奔波儿灞</span>
			</div>
			<div class="content">
				<select multiple="multiple" id="leftContent">
					
				</select>
			</div>
			<div class="send">
				<input type="text" id="leftText" class="sText">
				<input type="button" id="leftSendBtn" class="btn" value="发送">
			</div>
		</div>
	</div>
	<div class="box">
		<div class="chat">
			<div class="top">
				<span class="">灞波儿奔</span>
			</div>
			<div class="content">
				<select multiple="multiple" id="rightContent">

				</select>
			</div>
			<div class="send">
				<input type="text" id="rightText" class="sText">
				<input type="button" id="rightSendBtn" class="btn" value="发送">
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(my.js):

window.onload = function(){
	var lsBtn = document.getElementById("leftSendBtn");
	var rsBtn = document.getElementById("rightSendBtn");
	lsBtn.addEventListener("click",lsend);
	rsBtn.addEventListener("click",rsend);
}
function lsend(){
	var text = document.getElementById("leftText").value;
	if(text.trim() != ""){
	var leftContent = document.getElementById("leftContent");
	var rightContent = document.getElementById("rightContent");
	var option = document.createElement("option");
	var len = text.length;
	option.style.width = len * 15 + len*2 + "px";
	option.style.marginLeft = 350 - (len * 15 + len*2) - 72 +"px";
	option.innerHTML = text;
	leftContent.appendChild(option);
	var option1 = document.createElement("option");
	option1.innerHTML = text;
	option1.style.backgroundColor = "white";
	option1.style.marginLeft = "10px";
	option1.style.width = len * 15 + len*2 + "px";
	rightContent.appendChild(option1);
	document.getElementById("leftText").value = "";
}
}
function rsend(){
	var text = document.getElementById("rightText").value;
	if(text.trim() != ""){
	var leftContent = document.getElementById("leftContent");
	var rightContent = document.getElementById("rightContent");
	var option = document.createElement("option");
	var len = text.length;
	var len = text.length;
	option.style.width = len * 15 + len*2 + "px";
	option.style.marginLeft = 350 - (len * 15 + len*2) - 72 +"px";
	option.innerHTML = text;
	rightContent.appendChild(option);
	var option1 = document.createElement("option");
	option1.innerHTML = text;
	option1.style.backgroundColor = "white";
	option1.style.marginLeft = "10px";
	option1.style.width = len * 15 + len*2 + "px";
	leftContent.appendChild(option1);
	document.getElementById("rightText").value = "";
}
}
window.onkeydown = function(event){
	if(event.keyCode == 13){
	var text1 = document.getElementById("leftText").value;
	var text2 = document.getElementById("rightText").value;
	if(text1.trim() != "" || text2.trim() != ""){
	lsend();
	rsend();
}
}
}

CSS代码(style.css):

*{margin:0;}
.top{width:310px;padding:10px 20px;background-color:gray;border-top-left-radius:5px;border-top-right-radius:5px;font-size:18px;font-weight:bold;color:white;}
.content{background-color:white;}
select{border:2px solid gray;background:white;width:350px;height:470px;padding:10px;}
.send{width:310px;padding:10px 20px;background-color:gray;border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
.chat{}
.box{float:left;margin:20px 120px;}
body{width:100%;background-image:url(../img/bg.jpg);}
.outer{width:90%;margin:10px auto;}
.sText{width:220px;height:25px;border-radius:5px;font-size:15px;}
.btn{width:65px;height:30px;border-radius:5px;float:right;text-align:center;font-size:18px;color:white;background-color:limegreen;}
option{font-size:15px;max-width:325px;height:auto;border:0.5px solid gainsboro;border-radius:8px;padding:10px;margin:10px;background-color:greenyellow;margin-left:158px;margin-top:10px;margin-bottom:10px;max-width:200px;}

附件:下载该文件资源,减少时间成本(增值服务)