<!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;
}
.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: 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;
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="img/1.png" alt="" id="icon"> </div>
<input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span>
</div>
</div>
<script>
// 1.点击图标，切换用户功能
var container = document.getElementById('container');
var img = document.getElementById('icon');
var tag = 0; //0代表1.png 1代表2.png
var arr = ['img/1.png', 'img/2.png'];
//1.1 默认两个用户,通过点击来回切换
icon.onclick = function () {
if (tag === 0) {
img.src = arr[1];
tag = 1;
} else {
img.src = arr[0];
tag = 0;
}
}
// 2.点击发送按钮,把用户的聊天内容展示在聊天区域
var ul = container.children[1];
var btn = document.getElementById('btn');
var text = document.getElementById('text');
//2.1点击发送按钮,把用户的聊天内容展示在聊天区域
btn.onclick = function () {
var textValue = text.value; // 获取聊天输入框中的内容
// 如果聊天内容为空
if (textValue == '') {
alert('聊条内容不能为空！')
} else {
// 添加聊天内容
var li = document.createElement('li');
ul.appendChild(li);
var img = document.createElement('img');
img.src = arr[tag];
//2.2 设定聊天内容在聊天区域不同位置显示
if (tag === 0) {
img.classList.add('imgleft');
} else {
img.classList.add('imgright');
}
li.appendChild(img);
var span = document.createElement('span');
span.innerHTML = textValue;
if (tag === 0) {
span.classList.add('spanleft');
} else {
span.classList.add('spanright');
}
li.appendChild(span);
}
text.value = '';
return;
}
</script>
</body>
</html>
网友评论