仿微信聊天功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信聊天</title>
<style>
/**重置标签默认样式*/
* {
margin: 0;
padding: 0;
list-style: none;
}
#container {
width: 450px;
height: 800px;
background: snow;
margin: 50px auto 0;
position: relative;
box-shadow: 20px 20px 55px #777;
}
.header {
background: #000;
height: 40px;
color: #fff;
line-height: 40px;
font-size: 18px;
padding: 5px 10px;
}
.footer {
width: 430px;
height: 40px;
background: #666;
position: absolute;
bottom: 0;
padding: 10px;
}
.footer input {
width: 295px;
height: 30px;
outline: none;
font-size: 16px;
text-indent: 10px;
position: absolute;
border-radius: 6px;
right: 80px;
top: 15px;
border: none;
}
.footer button {
display: inline-block;
width: 62px;
height: 35px;
background: #999;
font-weight: 900;
line-height: 32px;
cursor: pointer;
text-align: center;
position: absolute;
color: white;
top: 13px;
right: 10px;
border: none;
border-radius: 6px;
outline: none;
}
.footer button:hover {
background: #22b8ff;
}
#user_face_icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: 6px;
left: 14px;
cursor: pointer;
overflow: hidden;
}
img {
width: 50px;
height: 50px;
border-radius: 3px;
}
.content {
font-size: 18px;
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 span{
background: #beed92;
padding: 10px;
border-radius: 10px;
float: left;
margin: 6px 10px 0 10px;
width: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
</style>
<script>
window.onload = () => {
// 获取按钮
let btn = document.getElementById('btn');
// 获取输入框
let text = document.getElementById('text');
// 聊天框
let content = document.getElementsByTagName('ul')[0];
btn.onclick = function(){
if(text.value ===''){
alert('不能发送空消息');
}else {
// 将输入的内容插入聊天框
content.innerHTML += '<li><span>'+text.value+'</span><img src="img/2.jpg" alt=""></li>';
//清空输入框的内容
text.value = '';
// 内容过多时,将滚动条放置到最底端
content.scrollTop=content.scrollHeight;
}
}
}
</script>
</head>
<body>
<div id="container">
<div class="header">
<span style="float: left;">未来的女朋友</span>
</div>
<ul class="content">
</ul>
<div class="footer">
<div id="user_face_icon">
<img src="img/2.jpg" alt="">
</div>
<input id="text" type="text" placeholder="说点什么吧...">
<button id="btn" type="button">发送</button>
</div>
</div>
</body>
</html>