效果图
![聊天演示.gif](https://i-blog.csdnimg.cn/blog_migrate/03a02ae673a9fc2bd52d0301b4a7cfc3.gif)
案例材料
![phone.jpg](https://i-blog.csdnimg.cn/blog_migrate/99eb5f7722697eeec2a57981932a757b.jpeg)
![1.png](https://i-blog.csdnimg.cn/blog_migrate/d72b7d29a66acb449168a32e23b09fdf.png)
![2.png](https://i-blog.csdnimg.cn/blog_migrate/8e9df8fe582c2e3f14cba59589734a96.png)
案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 285px;
height: 591px;
background-image: url(img/phone.jpg);
background-repeat: no-repeat;
margin: 100px auto;
position: relative;
}
.box .content {
width: 237px;
height: 385px;
position: absolute;
top: 85px;
left: 24px;
overflow: auto;
background-color: #ECEAF1;
}
.box .content .right,
.box .content .left {
width: 100%;
height: 28px;
}
.box .content .left img {
float: left;
}
.box .content .right img {
float: right;
}
.box .content .right p,
.box .content .left p {
width: 164px;
float: left;
margin-top: 3px;
background-color: pink;
}
.box .content .right p {
float: right;
text-align: right;
}
.box .enter {
width: 237px;
height: 35px;
background-color: #EBF8F6;
position: absolute;
bottom: 86px;
left: 24px;
}
.box .enter .pic {
float: left;
margin-top: 4px;
}
.box .enter .con {
width: 150px;
height: 23px;
margin: 5px 0px 0px 10px;
outline: none;
}
.box .enter .send {
margin-left: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<!-- <div class="left">
<img src="img/1.png" alt="">
<p>你好</p>
</div>
<div class="right">
<img src="img/1.png" alt="">
<p>你好</p>
</div> -->
</div>
<div class="enter">
<img src="img/2.png" alt="" class="pic">
<input type="text" class="con">
<button class="send">发送</button>
</div>
</div>
<script>
// 获取节点
var elecontent = document.getElementsByClassName("content")[0];
var elecon = document.getElementsByClassName("con")[0];
var elepic = document.getElementsByClassName("pic")[0];
var elesend = document.getElementsByClassName("send")[0];
elesend.onclick = function() {
if (elecon.value == "") {
alert("您没有输入文字")
} else {
if (fas == 1) {
// 第一种写法
var eleleft = document.createElement("div");
var eleimg = document.createElement("img");
var elep = document.createElement("p");
elep.innerText = elecon.value
eleleft.className = "left";
eleimg.src = "img/2.png"
elecontent.appendChild(eleleft)
eleleft.appendChild(eleimg)
eleleft.appendChild(elep)
// 可以利用innerHTML识别标签的特性写第二种写法
elecontent.innerHTML += "<div class='right'> <img src = 'img/2.png' alt =''> <p>" + elecon.value + "</p> </div>";
// 第三种写法(模板字符串)
elecontent.innerHTML +=
`<div class="left">
<img src = "img/1.png" alt ="">
<p>${elecon.value}</p>
</div>`;
} else {
// 第一种写法
var eleleft = document.createElement("div");
var eleimg = document.createElement("img");
var elep = document.createElement("p");
elep.innerText = elecon.value
eleleft.className = "right";
eleimg.src = "img/1.png"
elecontent.appendChild(eleleft)
eleleft.appendChild(elep)
eleleft.insertBefore(eleimg, elep)
// 可以利用innerHTML识别标签的特性写第二种写法
elecontent.innerHTML += "<div class='left'> <img src = 'img/1.png' alt =''> <p>" + elecon.value + "</p></div>";
// 第三种写法(模板字符串)
elecontent.innerHTML +=
`<div class="left">
<img src = "img/1.png" alt ="">
<p>${elecon.value}</p>
</div>`;
}
}
// 这步是当输入完点击发送后 输入框的内容为空
elecon.value = '';
}
// 旗帜法则
var fas = 1;
elepic.onclick = function() {
if (fas == 1) {
elepic.src = "img/1.png";
fas = 2;
} else {
elepic.src = "img/2.png";
fas = 1;
}
}
</script>
</body>
</html>