布局 思路
- 需求：
- 两个用户聊天会切换头像
- 点击发送会将用户输入的信息输出到界面上
- 消息页面布局
- 对方发送信息的布局
- 自己 发送消息的布局
- 顶部的bar
- 显示昵称
- 显示当前时间
- 内容区域
- 展示自己和对方的发送的结果信息
- 信息高度到达最大高度，实现内容当前信息向上滚动展示
三大区域
- 展示用户昵称和时间的Bar
- 展示用户发送的信息显示的内容content[如果需要实现自动滚动效果，需要在套上一个div，定位模式relative——子绝父相]
- 底部展示输入框和发送按钮。
*切换用户头像技巧
声明一个标识为tag的变量，根据tag的值来确定是自己的头像还是对方的图片
var tag = 0;
if(tag==0){
img.src=arr[1];
tag=1;
}else{
img.src=arr[0];
tag=0;
}
*图片的地址或位置也可以存入数组中
var arr=['./images/1.png','./images/2.png'];
- 小技巧
- document.getElementsByClassName(‘r’); 通过类名获取元素，返回值是数组
var times = document.getElementsByClassName(‘r’);
console.log(times[0].children[0].innerHTML);
具体实例请参考如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微信</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
font-family: '微软雅黑';
}
#container{
width: 450px;
height: 600px;
background-color: #eee;
margin: 10px auto;
position: relative;
box-shadow: 0 0 16px #999;
}
.header{
height: 40px;
background: black;
color: white;
line-height: 40px;
font-size: 20px;
padding: 0 10px;
}
.footer{
width: 430px;
height: 40px;
background-color: #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;
background-color: #ccc;
font-weight: 900;
line-height: 38px;
cursor: pointer;
text-align: center;
position: absolute;
right: 10px;
top: 14px;
}
.footer span:hover{
color: #777;
background-color: #ddd;
}
.icon{
display: inline-block;
background-color: red;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 10px;
bottom: 3px;
cursor: pointer;
overflow: hidden;
}
img{
width: 60px;
height: 60px;
border-radius: 8px;
}
#scr{
position: relative;
height: 500px;
overflow: hidden;
}
.content{
position: absolute;
font-size: 20px;
width: 435px;
/* height: 490px; */
overflow: auto;
padding: 5px;
background-color: #eee;
}
.content li{
margin-top: 10px;
padding-left: 10px;
width: 412;
display: block;
clear: both;
overflow: hidden;
}
.content li img{
float: left;
}
.content li span{
background-color: #7cfc00;
padding: 10px;
border-radius: 10px;
float: left;
margin: 6px 10px 0 10px; /* 上6 右边10 下0 左10 */
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;
}
.content li span.spanRight{
float: right;
}
</style>
</head>
<body>
<div id="container">
<div class="header r">
<span style="float: right;">20:30</span>
<span style="float: left;">小妹客服聊天中</span>
</div>
<div id="scr">
<ul class="content"> <!-- 内容区域start -->
<!-- <li>
<img src="images/1.png">
<span>来咨询一下，您的相关问题</span>
</li> -->
</ul> <!-- 内容区域end -->
</div>
<div class="footer">
<div class="icon">
<img src="images/1.png" id="icon" >
</div>
<input id="text" type="text" placeholder="晴说点什么？"/>
<span id="btn">发送</span>
</div>
</div>
</body>
<script type="text/javascript">
//思路：
// 1.有两个用户
// 两个用户在一起聊天
// 点击图片可以实现切换用户
// 2.点击发送内容
// 将内容显示在聊天区域
// 设定聊天在不同的区域
//1.获取图片标签
var img = document.getElementById('icon'); //用户头像
var arr=['./images/1.png','./images/2.png'];
var tag = 0;
//2.给图片添加点击事件 用于切换用户头像
// img.οnclick=function(){
// }
//3.获取发送按钮
var btn = document.getElementById('btn');
var num=-1; //统计聊天记录
btn.onclick=function(){
//3.1判断用户输入内容是否为空
var text = document.getElementById('text').value;
if(text==''){
alert('聊天内容不能为空哦~~');
return;
}else{
//已经获取到内容
var contents = document.getElementById('container').children[1].children[0]; //ul
// alert(contents);
contents.innerHTML+='<li><img src='+arr[tag]+'><span>'+text+'</span></li>';
}
//2.1根据显示图片切换用户头像
if(tag==0){
img.src=arr[1];
tag=1;
}else{
img.src=arr[0];
tag=0;
}
//获取内容区域下的img span
var userIcon = contents.getElementsByTagName('img');
var usserspan = contents.getElementsByTagName('span');
num++;
console.log(userIcon[num]);
if(tag==0){
userIcon[num].className='imgLeft';
usserspan[num].className='spanLeft';
}else{
userIcon[num].className='imgRight';
usserspan[num].className='spanRight';
}
//4.清空聊天记录
document.getElementById('text').value='';
//
checkTheHeight(contents);
}
function checkTheHeight(contents){
// console.log(contents.clientHeight);
//console.log(contents.offsetHeight); //500
//console.log(contents.children[0].offsetHeight);
var scr = document.getElementById('scr');
var len = contents.children.length-1;
//console.log(len);
if(len){
if(contents.offsetHeight>scr.clientHeight){
contents.style.top=contents.offsetTop-contents.children[len].offsetHeight-10+'px';
}
}
}
//刷新时间
setInterval(function(){
var date = new Date();
var day = date.getDay(); //星期
var month = date.getDate(); //月份
var hour = date.getHours();
var minute = date.getMinutes();
var times = document.getElementsByClassName('r');
//console.log(hour+' : '+minute);
// console.log(times[0].children[0].innerHTML);
times[0].children[0].innerHTML=hour+':'+minute;
},1000);
</script>
</html>
